Responsive Grid Layout with CSS

Responsive design means writing CSS that adapts to different screen sizes. A layout that looks great on a desktop might be unusable on a phone without the right breakpoints and flexible units.

The Basics of Media Queries

The @media rule lets you apply styles only when the viewport meets certain conditions. For example, you might stack a navbar vertically on small screens:

@media only screen and (max-width: 600px) {
  .logo,
  .nav li {
    display: block;
    width: 100%;
  }
}

This tells the browser: when the screen is 600px wide or less, make the logo and nav items full-width block elements.

CSS Grid for Responsive Layouts

CSS Grid makes two-dimensional layouts straightforward. You define columns and rows, and the browser handles placement.

Basic Grid Setup

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

This creates a three-column grid with equal-width columns and a 1rem gap between items.

Responsive Grid Without Media Queries

Grid's auto-fill and minmax() let columns adapt automatically:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

The browser calculates how many columns fit. On a wide screen you get four or five columns; on a narrow screen they stack to one or two — no media query needed.

auto-fit behaves almost identically, with one difference that matters when you have fewer items than fitting tracks. auto-fill leaves the empty columns in place, so three cards sit at the left of a wide container. auto-fit collapses the empty tracks, so those three cards stretch to fill the row instead. Reach for auto-fit when you want the items to spread out, and auto-fill when you want them to keep a consistent column width.

Named Grid Areas

For page-level layouts, grid-template-areas lets you name regions and assign elements to them:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

On smaller screens, override the template to stack everything:

@media only screen and (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Grid vs. Flexbox

Use Grid when you need to control both rows and columns — page layouts, dashboards, or image galleries. Use Flexbox when items flow in a single direction — navigation bars, centering content, or distributing space within a row.

They work well together. A common pattern is Grid for the page layout and Flexbox for components inside each grid area.

Practical Tips

• Start mobile-first: Write your base styles for small screens, then use min-width media queries to enhance for larger screens.
• Use fr units: The fr unit distributes available space proportionally. It is cleaner than calculating percentages.
• Test with browser DevTools: Use the device toolbar to resize the viewport without changing your actual window.
• Don't forget gap: Grid's gap property replaces margin hacks for spacing between items.

Wrapping Up

CSS Grid combined with a few well-placed media queries gives you responsive layouts with minimal code. Start with auto-fill and minmax() for content grids, and use named areas for page-level structure. Flexbox handles the rest.