How to Build a Responsive Website with CSS Grid: A Step-by-Step Guide

CSS Grid has revolutionized web layout, making it simple to build complex, responsive designs with just a few lines of CSS. Unlike older methods, Grid gives you precise control over rows and columns, letting your content adapt beautifully to any screen size. Here’s a practical walkthrough to get you started.

We’ll create a classic page structure: header, main content area, sidebar, and footer. We’ll make it responsive at three breakpoints: desktop, tablet, and mobile.

1. Define Your Grid Container

Start by setting up your HTML with semantic tags. Then apply display: grid to your container. This single property activates Grid for all direct children.

.container { display: grid; gap: 20px; grid-template-columns: 1fr; }

Using 1fr creates a single, flexible column—perfect for a mobile-first approach.

2. Start with a Mobile-First Layout

Mobile-first means keeping things simple. Your one-column layout stacks all blocks naturally. No extra media queries are needed at this stage, keeping your base CSS clean and fast.

3. Add a Tablet Breakpoint

Use a media query to introduce multiple columns when the viewport widens:

@media (min-width: 768px) { .container { grid-template-columns: 2fr 1fr; } }

• Main content spans two fractional units
• Sidebar takes one unit on the right

4. Scale Up to Desktop with Template Areas

At 1024px and above, use named areas for a clean, readable full layout:

.container { grid-template-areas: "header header" "main aside" "footer footer"; }

Assign each child element its area with grid-area: header; for full control.

And there you have it—a fully responsive website built with CSS Grid in minutes. Grid handles the heavy lifting, so you can spend more time perfecting your design. Try exploring auto-fit and minmax() for even more flexible layouts without media queries.