CSS Grid
Two-dimensional layouts: define rows and columns with grid-template, fr units, and auto-fit
Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.
UpgradeKnowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
CSS Grid is designed for two-dimensional layout — rows and columns at the same time. Flexbox is great for one axis; Grid is for the full page structure.
Enable Grid:
css .container { display: grid; grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, flex, flex */ grid-template-rows: auto; gap: 24px; }
The `fr` unit — fractional space:
css /* 3 equal columns */ grid-template-columns: 1fr 1fr 1fr; /* Shorthand */ grid-template-columns: repeat(3, 1fr); /* Sidebar + main: 250px sidebar, rest goes to main */ grid-template-columns: 250px 1fr;
Responsive card grid without media queries:
css .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } /* auto-fit: fit as many columns as possible minmax(250px, 1fr): each column is at least 250px, grows to fill space */
Placing items with grid-column / grid-row:
css .hero { grid-column: 1 / 3; /* span from line 1 to line 3 (= 2 columns) */ grid-row: 1 / 2; } /* Shorthand span */ .sidebar { grid-column: span 2; /* occupy 2 column tracks */ }
Named template areas:
css .page { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 250px 1fr; grid-template-rows: 64px 1fr 48px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
Grid vs Flexbox:
| Use Flexbox when | Use Grid when | |---|---| | Laying out items in one direction | You need rows AND columns simultaneously | | Content drives the layout | Layout drives the content | | Navigation bars, button groups | Page templates, card grids, dashboards |
Examples
Full page layout with named areas
Named grid areas make the layout intention immediately readable — you can visualize the entire page structure from the CSS alone
/* HTML */
/* <div class="page">
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
</div> */
.page {
display: grid;
min-height: 100vh;
grid-template-columns: 240px 1fr 200px;
grid-template-rows: 64px 1fr 48px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 0;
}
header { grid-area: header; background: #1e1b4b; color: white; }
nav { grid-area: nav; background: #f1f5f9; }
main { grid-area: main; padding: 24px; }
aside { grid-area: aside; background: #fafafa; }
footer { grid-area: footer; background: #334155; color: white; }Responsive card grid with auto-fit
`auto-fit` + `minmax()` creates a responsive grid with no media queries — columns snap from 1 to 2 to 3 based on available space
/* Cards at least 280px wide, as many columns as fit */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
padding: 24px;
}
/* Featured card spans 2 columns when space allows */
.card--featured {
grid-column: span 2;
}
/* Card with equal rows */
.card {
display: grid;
grid-template-rows: auto 1fr auto; /* header, body grows, footer */
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}How well did you understand this?
Next in CSS & Styling
Responsive Design