Skip to content

Instantly share code, notes, and snippets.

View AakashRao-dev's full-sized avatar
🏃
Getting Cracked...

Aakash Rao AakashRao-dev

🏃
Getting Cracked...
379 followers · 46 following
View GitHub Profile
@AakashRao-dev
AakashRao-dev / index.html
Created September 3, 2022 09:14
The minmax() function for CSS Grid Layouts-final
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>The minmax() function</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / index.html
Created September 3, 2022 08:42
Explicit and implicit grid with grid-auto-row and grid-auto-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Implict and Explicit Grid Example</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / index.html
Last active September 4, 2022 04:33
Difference between the explicit and the implict grid final
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Implict and Explicit Grid Example</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / index.html
Created September 3, 2022 04:01
The grid-row and grid-column property v2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>The grid-row and grid-column property v2</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / index.html
Last active September 3, 2022 04:04
The grid-row and grid-column property v1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>The grid-row and grid-column property</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / index.html
Last active September 3, 2022 11:26
Creating and structuring grid layout v2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Creating and structuring grid layout</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / index.html
Last active September 3, 2022 11:31
Creating and Structuring the grid layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Creating and Structuring the grid layout</title>
</head>
<body>
@AakashRao-dev
AakashRao-dev / style.css
Last active September 4, 2022 04:23
Syntax of fr unit
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
@AakashRao-dev
AakashRao-dev / style.css
Created August 19, 2022 10:23
Grid Syntax
.grid-container {
display: grid;
}
@AakashRao-dev
AakashRao-dev / index.html
Created August 19, 2022 09:39
Conference Scheduler Using Grid - Final
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Conference Scheduler interface using CSS Grid</title>
</head>
<body>