Scribd
Upload
24 views26 pages

Grid Notes

The document provides an overview of CSS Grid layout, highlighting its advantages such as ease of creating two-dimensional layouts, simpler markup, and flexibility. It includes examples of grid implementations for various layouts, including a navigation menu and responsive design. The document also discusses mobile responsiveness and accessibility considerations in grid design.

Uploaded by

TRIBILLIOgmailcom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
24 views26 pages

Grid Notes

The document provides an overview of CSS Grid layout, highlighting its advantages such as ease of creating two-dimensional layouts, simpler markup, and flexibility. It includes examples of grid implementations for various layouts, including a navigation menu and responsive design. The document also discusses mobile responsiveness and accessibility considerations in grid design.

Uploaded by

TRIBILLIOgmailcom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 26

GRID

INDEX.HTML
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Why learn CSS Grid layout?</h1>

<ul class="list">
<li>EASIER TO CREATE TWO DIMENSIONAL LAYOUTS</li>
<li>SIMPLER MARKUP</li>
<li>FLEXIBLE</li>
<li>SKIP FRAMEWORKS</li>
<li>BROWSER SUPPORT</li>
<li><a href="examples.html">SEE EXAMPLES</a></li>
</ul>
</body>
</html>

INDEX.CSS
h1 {
color: #ff6f69;
text-align: center;
}

ul {
list-style-type: none;
padding-left: 0;
}

.list {
padding-left: 0;
display: grid;
grid-gap: 2px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 80px;
}

.list :nth-child(1) {
grid-column: 1/ span 2;
}

.list :nth-child(6) {
grid-column: 1/ span 2;
}

li:hover {
background-color: #ff6f69;
}

a {
color: #ffeead;
}

li {
background-color: #88d8b0;
display: flex;
align-items: center;
justify-content: center;
color: #ffeead;
font-weight: 800;
letter-spacing: 1px;
}

html, body {
background: #ffeead;
}

GRID EXAMPLES
<html>
<head>
<link rel="stylesheet" href="basic.css">
<style>
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px 50px;
grid-gap: 3px;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>

REPEAT GRID
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
grid-gap: 3px;
}

OR

.container {
display: grid;
ROW / COLUMN
grid-template: repeat(2, 50px) / repeat(3, 1fr);
grid-gap: 3px;
}

NAVIGATION MENU
INDEX.HTML
<html>
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="basic.css">
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>

STYLE.CSS

.container {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px 200px 40px;
}

.header {
grid-column: 1 / -1;
/* grid-column: 1/3 */
}
.menu {
grid-column: 1/ 4
}

.content {
grid-column: 4/-1;
/* grid-column: 4/13; */
}

.footer {
grid-column: 1 / -1;
}

ANOTHER WAY

body{
height: 100vh;
margin: 0;
padding: 0;
}

.container div:nth-child(1){
background-color: green;
}

.container div:nth-child(2){
background-color: tomato;
}

.container div:nth-child(3){
background-color: indigo;
}

.container div:nth-child(4){
background-color: brown;
}

.container{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px 300px 100px;
text-align: center;
grid: 10px;
}

.header{
grid-column: 5 / -1;
padding: 40px 0
}

.menu{
grid-column: 1/5;
grid-row: 1/3;
}

.content{
grid-column: 5/13;

.footer{
grid-column: 1/13;
}

USING GRID TO SPAN FULL HEIGHT

body{
height: 100vh;
margin: 0;
padding: 0;
}

.container div:nth-child(1){
background-color: green;
}

.container div:nth-child(2){
background-color: tomato;
}

.container div:nth-child(3){
background-color: indigo;
}

.container div:nth-child(4){
background-color: brown;
}

.container{
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px auto 100px;
text-align: center;
grid: 10px;
}
.header{
grid-column: 5 / -1;
padding: 40px 0
}

.menu{
grid-column: 1/5;
grid-row: 1/3;
}

.content{
grid-column: 5/13;

.footer{
grid-column: 1/13;
}

OR
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
grid-template-areas:
"m h h h h h h h h h h h"
"m c c c c c c c c c c c"
"m f f f f f f f f f f f";
}

.header {
grid-area: h;
}

.menu {
grid-area: m;
}

.content {
grid-area: c;
}

.footer {
grid-area: f;
}
OR
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
grid-template-areas:
". h h h h h h h . . . ."
"m c c c c c c c c c c c"
"f f f f f f f f f f f f";
}

.header {
grid-area: h;
}

.menu {
grid-area: m;
}

.content {
grid-area: c;
}

.footer {
grid-area: f;
}

MINMAX
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
grid-auto-rows: 100px; //MAKE NEXT CREATED ROWS 100PX
}

INDEX.HTML
<html>
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="basic.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>

.container > div {


display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}

html, body {
background-color: #ffeead;
margin: 10px;
}

.container > div:nth-child(1n) {


background-color: #96ceb4;
}

.container > div:nth-child(3n) {


background-color: #88d8b0;
}

.container > div:nth-child(2n) {


background-color: #ff6f69;
}

.container > div:nth-child(4n) {


background-color: #ffcc5c;
}

MOBILE RESPONSIVE GRID


main {
display: grid;
grid-template-columns: 1fr;
gap: 1em;
}

RESPONSIVE DESIGN
INDEX.HTML
<!doctype html>
<html lang="en">

<head>
<title>SciStream</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Manrope:[email protected]&family=Source+Code+Pro:ital,wght@0,200..9
00;1,200..900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>

<body>
<!-- <header class="site-header">
<h1>SciStream</h1>
</header> -->
<main>
<a href="/crystals-stabilise-quantum-computers.html"
class="technology"
aria-label="Discover how crystals stabilize time
in quantum computers">
<article>
<img src="images/crystals.jpg"
alt="An AI rendering of crystals in a
quantum computer">
<header class="article-header">
<h2>Technology</h2>
<h3>Crystals used to stabilise time in
quantum computers</h3>
</header>
</article>
</a>
<a href="/plastic-eating-enzymes.html"
class="environment"
aria-label="Read about enzymes that eat oceanic
pollution">
<article>
<img src="images/plastics.jpg"
alt="Plastic floating in the ocean">
<header class="article-header">
<h2>Environment</h2>
<h3>Enzymes eat oceanic pollution</h3>
</header>
</article>
</a>
<a href="/origins-universe-asteroid.html"
class="nasa"
aria-label="Discover how asteroid debris offers
clues to the universe's origins and potential extraterrestrial life">
<article>
<img src="images/asteroid.jpg"
alt="An asteroid flying through
space">
<header class="article-header">
<h2>Nasa</h2>
<h3>Samples collected from debris
thrown off by collision between asteroids in deep space could give
clues to origins of
the universe and point towards
extra-terrestrial life</h3>
</header>
</article>
</a>
<a href="/physics-unified-theory-failed.html"
class="physics"
aria-label="Explore how physicists are redefining
the Unified Theory">
<article>
<img src="images/physics.jpg"
alt="A complex diagram showing Unified
Theory in physics">
<header class="article-header">
<h2>Physics</h2>
<h3>Unified Theory: physicists are
rewriting the book</h3>
</header>
</article>
</a>
<a href="/inhalable-nanoparticles-medical-
breakthrough.html"
class="health"
aria-label="Read about inhalable nanoparticles, a
potential breakthrough in treating pulmonary diseases">
<article>
<img src="images/nano.jpg"
alt="A close-up of nanoparticles">
<header class="article-header">
<h2>Health</h2>
<h3>Inhalable nanoparticles could be
gamechanger in fight against pulmonary diseases</h3>
</header>
</article>
</a>
</main>
<!-- <footer>
<p>&copy; SciStream 2025</p>
</footer> -->
</body>

</html>

css
html, body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
}

body {
margin: 1em;
}

/* =================
Layout
================= */

main {
display: grid;
grid-template-columns: 1fr;
gap: 1em;
}

@media (min-width: 500px) {


main {
grid-template-columns: 1fr 1fr;
}
.technology {
grid-column: span 2;
}
.nasa {
grid-row: span 2;
}
.health {
grid-column: span 2;
}
}
@media (min-width: 870px) {
/*
Challenge:
1. Create a 12 column layout.
(Don’t write 1fr 12 times 😡)
2. Place the items using grid lines.
(📝 Try to write as little CSS as possible.)
*/
main {
grid-template-columns: repeat(12, 1fr)
}

.technology {
grid-column: 1 / 7;
}

.environment {
grid-column: 7 / 10;
}

.nasa {
grid-column: 10 / -1;
}

.physics {
grid-column: 1 / 4;
}

.health {
grid-column: 4 / 10;
}
}

/* =================
Article Card
================= */

a:hover, a:focus {
filter: brightness(0.9);
}

a:focus {
outline: 3px solid #5a5a5a;
box-shadow: 0 0 0 3px rgba(135,18,113,0.5);
transition: outline 0.2s ease, box-shadow 0.2s ease;
}

article {
border-radius: 0.2em;
background-color: #e5e5e5;
height: 100%;
}

.article-header {
box-sizing: border-box;
padding: 1em;
width: 100%;
}

/* =================
Typography
================= */

h1 {
color: #0F0F0F;
letter-spacing: 0.04em;
font-family: "Source Code Pro", sans-serif;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

h2 {
font-size: 0.88rem;
color: #5D0E50;
margin: 0;
letter-spacing: 0.065em;
text-transform: uppercase;
}

h3 {
font-size: 1rem;
margin: .4em 0;
letter-spacing: 0.03em;
color: #111111;
font-weight: 500;
}

p {
margin: 0;
font-size: .85rem;
color: #7c7c7c;
}

/* =================
Images
================= */

img {
width: 100%;
border-top-left-radius: .2em;
border-top-right-radius: .2em;
}

SWAP PHYSICS AND ENVIRONMENT


ONCE YOU SWAP CHECK FOR ACCESSIBILITY
OR IF POSSIBLE DONT SWAP
html, body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
}

body {
margin: 1em;
}

/* =================
Layout
================= */

main {
display: grid;
grid-template-columns: 1fr;
gap: 1em;
}

@media (min-width: 500px) {


main {
grid-template-columns: 1fr 1fr;
}
.technology {
grid-column: span 2;
}
.nasa {
grid-row: span 2;
}
.health {
grid-column: span 2;
}
}

@media (min-width: 870px) {


/*
Challenge:
1. Create a 12 column layout.
(Don’t write 1fr 12 times 😡)
2. Place the items using grid lines.
(📝 Try to write as little CSS as possible.)
*/
main {
grid-template-columns: repeat(12, 1fr)
}

.technology {
grid-column: 1 / 7;
}

.environment {
grid-column: 1 / 4;
grid-row: 2 / 3;
}

.nasa {
grid-column: 10 / -1;
}

.physics {
grid-row: 1 /2;
grid-column: 7 / 10;
}

.health {
grid-column: 4 / 10;
}
}

/* =================
Article Card
================= */

a:hover, a:focus {
filter: brightness(0.9);
}

a:focus {
outline: 3px solid #5a5a5a;
box-shadow: 0 0 0 3px rgba(135,18,113,0.5);
transition: outline 0.2s ease, box-shadow 0.2s ease;
}

article {
border-radius: 0.2em;
background-color: #e5e5e5;
height: 100%;
}

.article-header {
box-sizing: border-box;
padding: 1em;
width: 100%;
}

/* =================
Typography
================= */

h1 {
color: #0F0F0F;
letter-spacing: 0.04em;
font-family: "Source Code Pro", sans-serif;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

h2 {
font-size: 0.88rem;
color: #5D0E50;
margin: 0;
letter-spacing: 0.065em;
text-transform: uppercase;
}

h3 {
font-size: 1rem;
margin: .4em 0;
letter-spacing: 0.03em;
color: #111111;
font-weight: 500;
}

p {
margin: 0;
font-size: .85rem;
color: #7c7c7c;
}

/* =================
Images
================= */

img {
width: 100%;
border-top-left-radius: .2em;
border-top-right-radius: .2em;
}

MORE GRID
INDEX.HTML
<!doctype html>
<html>

<head>
<title>Grid Layout</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
<div class="grid-container">
<header class="grid-item">Header</header>
<nav class="grid-item">Nav</nav>
<main class="grid-item">Main</main>
<aside class="grid-item">Aside</aside>
<footer class="grid-item">Footer</footer>
</div>
</body>

</html>

CSS

html, body {
margin: 1em;
padding: 0;
}

.grid-container {
display: grid;
grid-template: repeat(5, 1fr) / repeat(12, 1fr);
}

.grid-item {
padding: .5em;
font-size: 2em;
color: black;
display: flex;
align-items: center;
justify-content: center;
}

header {
background-color: palegoldenrod;
/* grid-column-start: 1;
grid-column-end: 13; */
grid-column: 1 / -1;
}
nav {
background-color: lightcoral;
grid-column: 1 / 3;
grid-row: 2 / 5;
}

/*
Challenge:
1. Add the necessary grid-column and grid-row
lines to complete this layout. Only write
the CSS you need - let the algorithm do the rest.

*/
ON COLUMN 1 - 13
ON ROWS 1 - 15

main {
background-color: lightgreen;
grid-column: 3/ 10;
grid-row: 2/5
}

aside {
background-color: lightgray;
grid-column: 10 / 13;
grid-row: 2/5
}

footer {
background-color: gold;
grid-column: 1/-1;
}

GRID TEMPLATE AREAS


INDEX.HTML

<!doctype html>
<html>

<head>
<title>Grid Layout</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
<div class="grid-container">
<header class="grid-item">Header</header>
<nav class="grid-item">Nav</nav>
<main class="grid-item">Main</main>
<aside class="grid-item">Aside</aside>
<footer class="grid-item">Footer</footer>
</div>
</body>

</html>

INDEX.CSS
IMPORTANT FOR EMPTY SPACE USE ...
.grid-container {
border: 1px solid red;
display: grid;
grid-template: repeat(5, 1fr) / repeat(13, 1fr);
grid-template-areas:
". nav nav head head head head head head head head head head"
". nav nav main main main main main main main aside aside
aside"
". nav nav main main main main main main main aside aside
aside"
". nav nav main main main main main main main aside aside
aside"
".... .... .... foot foot foot foot foot foot foot foot foot
foot";
}

css

html, body {
margin: 1em;
padding: 0;
}

/*
Challenge:
1. Finish mapping out these elements using
their grid-areas.

*/

.grid-container {
display: grid;
grid-template: repeat(5, 1fr) / repeat(12, 1fr);
grid-template-areas:
"head head head head head head head head head head head head"
"nav nav main main main main main main main aside aside aside"
"nav nav main main main main main main main aside aside aside"
"nav nav main main main main main main main aside aside aside"
"foot foot foot foot foot foot foot foot foot foot foot foot";
}

.grid-item {
padding: .5em;
font-size: 2em;
color: black;
display: flex;
align-items: center;
justify-content: center;
}

header {
grid-area: head;
background-color: palegoldenrod;
}

nav {
grid-area: nav;
background-color: lightcoral;
}

main {
grid-area: main;
background-color: lightgreen;
}

aside {
grid-area: aside;
background-color: lightgray;
}

footer {
grid-area: foot;
background-color: gold;
}

CSS GRID
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="sub-container">
<div class="pic-container"><img
src="./assets/images/pic1.jpg" alt=""></div>
<div class="pic-container"><img
src="./assets/images/pic2.jpg" alt="" ></div>
<div class="pic-container"><img
src="./assets/images/pic3.jpg" alt="" ></div>
<div class="pic-container"><img
src="./assets/images/pic4.jpg" alt=""></div>

</div>
</div>

</body>
</html>

INDEX.CSS
body{
padding: 0;
margin: 0;
}

.container{
width: 60%;
margin: 0 auto;
}

.sub-container{
display: grid;
grid-template: repeat(8, 70px) / repeat(12, 1fr);
gap: .3em;
}
.sub-container div img{
width: 100%;
height: 100%;
object-fit: cover;
}

.sub-container div:nth-child(1){
grid-column: 1/7;
grid-row: 1/-1;
}

.sub-container div:nth-child(2){
grid-column: 7/10;
grid-row: 1/5;
}

.sub-container div:nth-child(3){
grid-column: 10/13;
grid-row: 1/5;

.sub-container div:nth-child(4){
grid-row: 5/9;
grid-column: 7/13;

@media screen and (max-width: 600px){


.sub-container div:nth-child(1){
grid-column: 1/-1;
grid-row: 1/3;
}

.sub-container div:nth-child(2){
grid-column: 1/-1;
grid-row: 3/5;
}

.sub-container div:nth-child(3){
grid-column: 1/-1;
grid-row: 5/7;
}

.sub-container div:nth-child(4){
grid-column: 1/-1;
grid-row: 7/9;
}
}

@media screen and (min-width: 600px) and (max-width: 960px){


.sub-container div:nth-child(1){
grid-column: 1/7;
grid-row: 1/5;
}

.sub-container div:nth-child(2){
grid-column: 7/-1;
grid-row: 1/5;
}

.sub-container div:nth-child(3){
grid-column: 1/7;
grid-row: 5/9;
}

.sub-container div:nth-child(4){
grid-column: 7/-1;
grid-row: 5/9;
}
}

GRID TEMPLATE AREAS

RESPONSIVE ALL SCREENS GRID


AUTO FIT

INDEX.HTML
<html>

<head>
<link rel="stylesheet" href="index.css">
</head>

<body>
<main class="grid-container">
<article class="card">
<img src="img/normal1.jpg"
alt="A small evergreen tree in a forest" />
</article>
<article class="card tall">
<img src="img/vertical1.jpg"
alt="A densely forested hillside" />
</article>
<article class="card wide">
<img src="img/horizontal1.jpg"
alt="A snowy mountain range" />
</article>
<article class="card">
<img src="img/normal2.jpg"
alt="A lake stretching to the horizon" />
</article>
<article class="card">
<img src="img/normal3.jpg"
alt="Sunset on a snowy mountain" />
</article>
<article class="card big">
<img src="img/big1.jpg"
alt="A waterfall surrounded by forest" />
</article>
<article class="card">
<img src="img/normal4.jpg"
alt="A rocky outcrop" />
</article>
<article class="card tall">
<img src="img/vertical2.jpg"
alt="A track across a desert" />
</article>
<article class="card">
<img src="img/normal5.jpg"
alt="Large stones on grass" />
</article>
<article class="card wide">
<img src="img/horizontal2.jpg"
alt="A mountain range under a mauve sky" />
</article>
<article class="card">
<img src="img/normal6.jpg"
alt="Rapids in a river" />
</article>
<article class="card big">
<img src="img/big2.jpg"
alt="A rocky outcrop out night" />
</article>
<article class="card">
<img src="img/normal7.jpg"
alt="A semi-forested hillside" />
</article>
<article class="wide">
<img src="img/horizontal3.jpg"
alt="Mountains with misty valleys" />
</article>
<article>
<img src="img/normal8.jpg"
alt="A forest of tall trees" />
</article>
<article class="big">
<img src="img/big3.jpg"
alt="A lone tree on a plain" />
</article>
<article>
<img src="img/normal9.jpg"
alt="A moorland scene" />
</article>
<article class="tall">
<img src="img/vertical3.jpg"
alt="A lake beneath two mountains. " />
</article>
</main>
</body>

</html>
INDEX.CSS
html, body {
background-color: lightgray;
margin: 10px;
}

.card {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
}

.grid-container {
display: grid;
grid-gap: .5em;
grid-template-columns: repeat(auto-fit, 100px);
grid-auto-rows: 75px;
}

MAKE MORE DENSE

html, body {
background-color: lightgray;
margin: 10px;
}

.card {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
}
.grid-container {
display: grid;
grid-gap: .5em;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 75px;
grid-auto-flow: dense;
}

.wide {
grid-column: span 2;
}

.tall {
grid-row: span 2;
}

.big {
grid-row: span 2;
grid-column: span 2;
}

You might also like