Building Responsive Grid Layouts

A responsive grid should preserve readable content and avoid horizontal scrolling as the available width changes.

What you’ll learn

Build a fluid card grid with auto-fit.
Use a breakpoint to change major page regions.
Avoid narrow-screen overflow and unreadable card widths.

Understand the concept

An intrinsic responsive card grid can use repeat(auto-fit, minmax(min(100%, 170px), 1fr)) so the browser selects how many tracks fit. For more structural changes, a media query can switch a sidebar-and-content grid from two columns to one.

Start with the smallest practical width, test longer labels and remember that narrow containers can appear inside wide screens. The min(100%, ...) guard protects against a track minimum larger than its container.

What the browser evaluates

The browser determines the number of fit-able tracks from the grid size; a breakpoint can change the larger page-region structure.

Create a fluid card gallery

Cards reflow based on the available container width.

HTML

<div class="cards-grid"><article><strong>Starter</strong><p>Begin here</p></article><article><strong>Builder</strong><p>Make layouts</p></article><article><strong>Explorer</strong><p>Try patterns</p></article></div>

CSS

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); gap: 10px; max-width: 450px; }
.cards-grid article { min-width: 0; background: #eff6ff; border: 1px solid #bfdbfe; padding: 14px; border-radius: 8px; }
.cards-grid p { margin: 8px 0 0; color: #475569; }

Rendered output

Starter

Begin here

Builder

Make layouts

Explorer

Try patterns

Observe: Cards increase or decrease the number of columns automatically as the containing width changes.

A simple page-region grid

Create a main content area with a sidebar that can adapt within a constrained preview.

HTML

<div class="page-grid"><main><strong>Article</strong><p>Primary content and explanation.</p></main><aside><strong>Sidebar</strong><p>Related links.</p></aside></div>

CSS

.page-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(125px, 1fr); gap: 10px; max-width: 450px; }
.page-grid main, .page-grid aside { min-width: 0; padding: 14px; background: #f1f5f9; border-radius: 8px; }
.page-grid aside { background: #ccfbf1; }
.page-grid p { margin: 7px 0 0; font-size: 13px; }
@media (max-width: 600px) { .page-grid { grid-template-columns: 1fr; } }

Rendered output

Article

Primary content and explanation.

Observe: The main area and sidebar occupy columns at larger widths and stack below the breakpoint.

Explain the result

The browser determines the number of fit-able tracks from the grid size; a breakpoint can change the larger page-region structure.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

Common mistakes to avoid

Breakpoints based only on device names age poorly; set them when your content stops fitting.
Grid items with large fixed minimums or unbreakable content may still overflow despite fractional columns.

Try it yourself

Narrow the browser viewport and track the card columns. Change the media breakpoint and identify when the sidebar stacks.

Before changing the code, predict what will change. Then verify by checking the rendered result.

What you should remember

Let the content drive track counts, then add media queries only where structural changes are beneficial.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Introduction to Responsive Design →

Building Responsive Grid Layouts