CSS Grid and Responsive Layout Examples

A responsive page layout often combines a top header, navigation, primary content, related information and footer.

Use grid-template-areas to describe region placement and grid-template-columns for track sizes. At narrow widths, change the area map to a single column so readers can scroll naturally.

The HTML order should remain logical even when Grid changes visual placement. Avoid relying on visual order to communicate sequence in forms or instructions.

Named areas provide a readable layout map; a media query changes the map when narrow widths no longer fit side-by-side regions.

Align the main region and sidebar.

HTML

<div class="site-grid"><header>Header</header><main>Main article</main><aside>Related links</aside><footer>Footer</footer></div>

CSS

.site-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(110px, 1fr); gap: 9px; } .site-grid > * { padding: 15px; border-radius: 7px; background: #dbeafe; } .site-grid header, .site-grid footer { grid-column: 1 / -1; background: #1e40af; color: white; } .site-grid aside { background: #ccfbf1; }

Rendered output

Observe: Header and footer span the layout; main and sidebar share the middle row.

Use named areas for clear placement and a stacked narrow layout.

HTML

<div class="site-grid"><header>Header</header><main>Main article</main><aside>Related links</aside><footer>Footer</footer></div>

CSS

.site-grid { display: grid; grid-template-areas: "head" "main" "side" "foot"; grid-template-columns: minmax(0, 1fr); gap: 9px; } .site-grid header { grid-area: head; } .site-grid main { grid-area: main; } .site-grid aside { grid-area: side; } .site-grid footer { grid-area: foot; } .site-grid > * { min-width: 0; padding: 15px; border-radius: 7px; background: #dbeafe; } .site-grid aside { background: #ccfbf1; } @media (min-width: 700px) { .site-grid { grid-template-areas: "head head" "main side" "foot foot"; grid-template-columns: minmax(0, 2fr) minmax(130px, 1fr); } }

Rendered output

Observe: The layout stacks on narrow viewports; at 700px and wider, the sidebar forms the second column.

Named areas provide a readable layout map; a media query changes the map when narrow widths no longer fit side-by-side regions.

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

• Every named region must form a rectangle in the grid-template-areas map.

• Visual reordering does not change screen-reader or keyboard sequence.

Change the wide layout to a 3fr/1fr main-sidebar ratio and compare the side column.

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

Use layout areas to express structure and breakpoints to maintain readability.

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