Aakash Rao AakashRao-dev

🏃

Getting Cracked...

rendering pixels on the web

AakashRao-dev / index.html

Created August 17, 2022 10:31

Mock layout Source Code to learn about CSS Grid

	<!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>CSS Grid basic layout</title>
	</head>
	<body>

AakashRao-dev / index.html

Last active September 3, 2022 04:16

Difference between Explicit vs Implicit Grid starter

	<!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 / index.html

Last active September 3, 2022 09:15

The minmax() function for CSS Grid Layouts-starter

	<!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>Understanding the minmax() function for CSS Grid Layouts</title>
	</head>
	<body>

AakashRao-dev / style.css

Created August 18, 2022 12:12

grid-auto-flow syntax example

grid-auto-flow: [ row | column ] || dense

AakashRao-dev / index.html

Last active September 3, 2022 09:35

The difference between auto-fit and auto-fill

	<!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 difference between auto-fit and auto-fill</title>
	</head>
	<body>

AakashRao-dev / index.html

Last active September 3, 2022 10:37

The Grid auto flow property

	<!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 Grid auto flow property</title>
	<style>
	.container {

AakashRao-dev / index.html

Last active September 3, 2022 11:28

Advanced way of creating grid layout - starter

	<!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>Another way of creating grid layouts</title>
	</head>
	<body>

AakashRao-dev / index.html

Created August 19, 2022 07:40

Conference Scheduler Using Grid - Starter

	<!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>

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>

AakashRao-dev / style.css

Created August 19, 2022 10:23

Grid Syntax