https://www.youtube.com/watch?v=uuOXPWCh-6o
CSS Grid is a two-dimensional layout system. Where flexbox handles one direction at a time (row or column), Grid lets you define rows and columns simultaneously and place elements precisely within that structure.
It's the right tool for page-level layouts, photo galleries, dashboards — anywhere you need both axes at once.
.page-layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr 48px;
}
grid-template-columns and grid-template-rows define the track sizes:
.container {
display: grid;
/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* shorthand with repeat() */
grid-template-columns: repeat(3, 1fr);
/* mixed: fixed sidebar, flexible content */
grid-template-columns: 240px 1fr;
/* 3 columns: small, flexible, small */
grid-template-columns: 200px 1fr 200px;
}
The fr unit means "fraction of available space." 1fr 1fr 1fr gives three equal columns. 1fr 2fr gives two columns where the second is twice as wide.
gap works the same as in flexbox:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* same gap all around */
gap: 16px 24px; /* row gap, column gap */
}
By default, grid items flow into the next available cell automatically. But you can explicitly place items using line numbers:
/* Grid lines are numbered from 1 */
.featured-article {
grid-column: 1 / 3; /* spans from line 1 to line 3 (two columns wide) */
grid-row: 1 / 2;
}
/* Shorthand: start / span count */
.wide-item {
grid-column: 1 / span 2; /* start at line 1, span 2 columns */
}
For readable, maintainable page layouts, use named areas instead of line numbers:
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr 48px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
.page-header { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main { grid-area: main; }
.page-footer { grid-area: footer; }
This is immediately readable — you can see the layout structure just from the grid-template-areas string. Each quoted string is a row, each word is a cell, and repeated words span multiple cells.
<aside> ⌨️
Hands On
Build the named-area layout above. Create a file with five elements: a <header>, <nav>, <main>, <aside>, and <footer>. Apply the grid-template-areas pattern. Give each section a background color and a minimum height so you can see the structure. Then try changing the column sizes — swap 240px 1fr for 1fr 3fr and see how the layout responds.
</aside>
One of Grid's most powerful features: columns that automatically adjust their count based on available space.
.photo-gallery {
display: grid;
/* create as many columns as fit, each at least 250px wide */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
minmax(250px, 1fr) means each column is at least 250px and grows to fill available space. auto-fill creates as many columns as fit. Add more items — the grid adjusts. Resize the window — columns wrap. No media queries.
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
<aside> ⚠️
auto-fill and auto-fit behave identically when your grid has enough items to fill the space. The difference shows up when you have fewer items than columns: auto-fill keeps empty columns, auto-fit collapses them. For most layouts, auto-fill is what you want.
</aside>
Grid has the same alignment properties as flexbox, but they apply to both axes:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* align all items within their cells */
justify-items: center; /* horizontal alignment within cell */
align-items: center; /* vertical alignment within cell */
/* align the entire grid within the container */
justify-content: center;
align-content: center;
}
/* override for a single item */
.special-item {
justify-self: end;
align-self: start;
}
Full page layout
body {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
Article with sidebar and ads
.article-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 32px;
max-width: 1200px;
margin: 0 auto;
}
Magazine-style feature grid
.magazine-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 300px);
gap: 16px;
}
.feature-story {
grid-column: 1 / 3; /* spans first two columns */
grid-row: 1 / 3; /* spans both rows */
}
<aside> ⌨️
Hands On
Build a photo gallery using auto-fill and minmax. Create 8–10 <div> elements with different background colors (or use <img> tags with placeholder images from https://picsum.photos/300/200). Apply the responsive grid. Resize your browser window and watch the columns adjust automatically.
</aside>
<aside> 🎉
Grid unlocked
Named template areas alone will take you far. Most production page layouts can be expressed in 5–6 lines of grid CSS. The mental model is simple: define the track structure, name the areas, assign each element to an area.
</aside>
https://www.youtube.com/watch?v=hs3piaN4b5I
Both tools are excellent. The question is which one fits the problem you're solving.
Use Flexbox when:
Use Grid when:
In practice, they're complementary. A typical page might use Grid for the overall layout (header, sidebar, main, footer) and Flexbox for components inside each section (the navbar, the card grid, the form).
/* Grid for page structure */
.page {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
}
/* Flexbox for the navbar inside the header */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Flexbox for cards inside main */
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
<aside> 💡
There's no wrong answer if something works. As you build more, you'll develop intuition for which tool reaches naturally. If you find yourself fighting a flexbox layout to make it two-dimensional, switch to Grid. If you're adding unnecessary grid rows for a single-direction component, use Flexbox.
</aside>
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*
Built with ❤️ by the HackYourFuture community · Thank you, contributors
Found a mistake or have a suggestion? Let us know in the feedback form.