CSS Grid for Layout
Define rows and columns with CSS Grid, place items precisely, and create common page layouts with minimal code.
CSS Grid for Layout is a free Frontend Academy lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
What Is CSS Grid?
CSS Grid is a two-dimensional layout system — you control both rows and columns. It's the best tool for overall page structure and explicit placement of elements across a defined grid.
Defining Columns: grid-template-columns
grid-template-columns defines the column structure. Use fixed sizes (px), flexible fractions (fr), or auto. repeat(n, size) repeats a track definition.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}The fr Unit
fr (fraction unit) distributes the remaining space proportionally. 1fr 2fr gives the second column twice as much space as the first. Essential for fluid grid tracks.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Defining Rows: grid-template-rows
You can explicitly define rows too. If you don't, the browser creates implicit rows automatically. grid-auto-rows: minmax(200px, auto) sizes implicit rows.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap in Grid
Just like Flexbox, gap adds space between grid tracks without affecting the outer edges. row-gap and column-gap control axes separately.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Name grid areas with strings and assign elements to them with grid-area. Creates readable, visual layout code.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Placing Items with grid-column and grid-row
Control exactly where an item sits with grid-column: start / end and grid-row: start / end. Use -1 to reference the last line. span N spans N tracks.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit and minmax() — Responsive Columns
The most powerful responsive grid one-liner: repeat(auto-fit, minmax(280px, 1fr)). Creates as many columns as fit, each at least 280px wide, filling remaining space with 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill vs auto-fit
auto-fill creates tracks even if they're empty, keeping a fixed grid. auto-fit collapses empty tracks so items expand to fill the row. Use auto-fit for content that should stretch.
Implicit vs Explicit Grid
Tracks you define are the explicit grid. When you add more items than defined tracks, the browser creates implicit tracks. Control their size with grid-auto-rows and grid-auto-columns.
Grid vs Flexbox — When to Use Each
Grid: two-dimensional layouts, page structure, galleries, dashboards. Flexbox: one-dimensional rows or stacks, centering, distributing items in a row. They complement each other — use Grid for the page skeleton, Flexbox for component internals.
Quick Check
Which CSS value creates columns that are at least 250px wide and share remaining space equally?
Recap: CSS Grid
grid-template-columns defines columns. fr shares space. repeat() simplifies repetition. gap adds gutters. grid-template-areas makes layouts readable. auto-fit + minmax creates responsive grids without media queries. Grid is the go-to for two-dimensional page layouts.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “CSS Grid for Layout” lesson free?
Yes — the full text of “CSS Grid for Layout” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.
What will I learn in “CSS Grid for Layout”?
Define rows and columns with CSS Grid, place items precisely, and create common page layouts with minimal code. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “CSS Grid for Layout” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Viewport Meta Tag
- Flexbox for Layout
- CSS Grid for Layout
- Media Queries and Mobile-First Development