CSS Grid Responsive

Grid Areas let you name a page map. Grid Responsive asks what happens when the viewport narrows: do columns collapse, does the sidebar drop below the header, do cards reflow without a new HTML tree? Learn a few calm breakpoint patterns — the dedicated Responsive Design module comes next.

A responsive grid toolkit

📊 Responsive grid at a glance

Tool	Everyday job
`grid-template-columns`	Swap track lists inside a media query (e.g. two columns → one)
`grid-template-areas`	Redraw the named map when stacking beats side-by-side
`repeat(auto-fit, minmax(...))`	Fluid card columns without a breakpoint per count
Media query	Applies grid changes only when the viewport matches
`gap`	Keeps rhythm when tracks or maps change
Avoid extra HTML per width	Same DOM; CSS carries the layout shift

Start from the grid you already trust on a wide screen. At one clear breakpoint, change columns, rows, or the area map — not every property at once. Named areas from the last lesson make responsive swaps readable.

Columns at a breakpoint

When a two-column shell should become a single column on phones, change grid-template-columns inside a media query. Children and area names can stay put if the map still makes sense.

Two columns to one

css

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

@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}

Redraw the area map on small screens

Side-by-side header / aside / main maps often need a new grid-template-areas block when the sidebar should sit under the header. Rewrite the quoted rows; keep regions rectangular.

Stack the named shell

css

.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside  main"
"footer footer";
gap: 1rem;
}

@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}

auto-fit and minmax for card boards

For galleries and dashboards, repeat(auto-fit, minmax(...)) lets columns appear and wrap as space allows — often with fewer hand-tuned breakpoints than fixed column counts.

Fluid card columns

css

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

Narrow viewports are not a different layout language — same grid tools, different track lists or maps. Prefer CSS shifts over duplicating markup for “mobile HTML.”

A calm responsive grid habit

One primary breakpoint first. Pair column changes with area rewrites when labels help. Use auto-fit boards where card count should flex. Keep DOM order sensible for keyboard users. Full breakpoint systems and fluid typography wait for Responsive Design and Media Queries.

Named shell with a stack breakpoint

css

.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}

@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}

Minmax floor on a fixed board

css

.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}

@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}

Try it yourself

Flip a two-column shell to one column under max-width: 40rem.
Rewrite a header / aside / main / footer area map for a stacked narrow layout.
Build a card row with repeat(auto-fit, minmax(14rem, 1fr)).
Add one calm breakpoint — avoid resetting every grid property at once.
Keep one HTML tree; note the Responsive Design lesson next in the course.

Common mistakes

Shrinking tracks forever instead of changing columns or stacking
Building separate “mobile HTML” instead of updating the grid in CSS
Mismatched cell counts when rewriting grid-template-areas rows
One giant media query that resets every grid property and gap
Treating this lesson as the entire Responsive Design course

Summary

Responsive grid adapts columns, area maps, and auto-fit boards across widths
Media queries scope track and map changes to matching viewports
Named areas from Grid Areas pair well with map rewrites on small screens
Prefer calm breakpoints and one DOM tree
Grid module complete (490–530); Responsive Design module follows

🧠 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