Mastering CSS Grid layouts for modern web development

CSS Grid has fundamentally changed the way we approach web layouts. Before Grid, we relied on floats, flexbox hacks, and even tables to achieve complex designs. Now, with a few lines of CSS, you can create sophisticated two-dimensional layouts that adapt beautifully to any screen size.

Why CSS Grid matters

The key advantage of CSS Grid is that it lets you think about layout in two dimensions simultaneously — rows and columns. Flexbox is still great for one-dimensional flows, but Grid shines when you need precise control over both axes.

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

This simple snippet creates a responsive grid that automatically adjusts the number of columns based on available space. No media queries needed.

Practical patterns

Here are some patterns I use daily:

The Holy Grail Layout

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

Card grids with consistent heights

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

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

The nested grid on each card ensures that titles, content, and footers all align across cards, regardless of content length.

When to use Grid vs Flexbox

Use Grid when you have a two-dimensional layout — think page layouts, dashboards, and image galleries. Use Flexbox for one-dimensional arrangements — navigation bars, button groups, and centering content.

The truth is, most real-world layouts use both. Grid for the macro layout, Flexbox for the micro components within each grid cell.

Try it yourself

Drag the sliders to see how columns and gap affect a grid layout: