CSS Grid

Flexbox lined items up in one direction. CSS Grid opens the next chapter: rows and columns together. Turn on display: grid, sketch tracks, add gap, then go deeper in the Grid Container, Items, Areas, and Responsive lessons that follow.

A Grid starter toolkit

📊 Grid at a glance

Idea	Everyday job
Grid container	Parent with `display: grid` (or `inline-grid`)
Grid items	Direct children that sit in the grid
Tracks	Rows and columns that form the lattice
Cells / areas	Spaces where items land (areas come in a later lesson)
`gap`	Gutters between tracks without margin hacks
`fr` unit	Share leftover space among tracks (preview)

Think of Grid as graph paper for the page: you draw columns and rows first, then drop content into the cells. Flexbox stays great for toolbars and single-axis clusters.

display: grid — turn on the lattice

Set display: grid on the parent. Children become grid items automatically — no extra class required for the basic model.

Basic grid container

css

.board {
display: grid;
}

Columns first — a simple template

grid-template-columns defines vertical tracks. Three equal columns is a calm starting sketch for cards or tiles.

Three equal columns

css

.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

gap — honest gutters

Use gap (or row-gap / column-gap) so spacing stays consistent when tracks reflow. Prefer gap over sprinkling margins on every child.

Grid with gap

css

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}

A tiny card matrix

Same idea as a gallery sketch — equal tracks plus gap — but now you are speaking Grid, not only flex-wrap.

Card matrix

css

.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}

.cards__item {
min-height: 8rem;
}

fr — share leftover space

The fr unit divides free space among tracks. 2fr 1fr makes the first column twice as wide as the second when space remains.

Uneven fr columns

css

.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}

A calm Grid habit

Use Grid for two-dimensional page shells and matrices. Use Flexbox for one-dimensional rows. Start with display: grid, a simple grid-template-columns, and gap. Leave auto-placement deep dives, named areas, and responsive Grid tracks for the next lessons.

Named starter shell

css

.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}

.page__main,
.page__rail {
min-width: 0;
}

Try it yourself

Make a container with display: grid.
Set grid-template-columns: repeat(3, 1fr).
Add gap: 1rem between tracks.
Try 2fr 1fr for a main + rail shell.
Write one sentence: when would you still choose Flexbox instead?

Common mistakes

Putting display: grid on every element without a layout need
Expecting Flexbox wrap alone to replace a real 2D Grid
Skipping gap and fighting child margins forever
Jumping into named areas before basic tracks feel natural
Building whole page shells with float when Grid fits better

Summary

CSS Grid is two-dimensional: rows and columns together
display: grid makes children into grid items
grid-template-columns (and later rows) define tracks
gap and fr keep gutters and free space calm
Deeper container, item, area, and responsive Grid lessons come next

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language