CSS Grid Layout: A Complete Guide to Building Modern Web Layouts - Blog

Picture yourself organizing a gallery wall in your home. You're deciding where each frame goes, how much space each piece needs, and how they all relate to each other. That's essentially what CSS Grid does for web layouts—it gives you a two-dimensional canvas where you can place elements exactly where you want them. Let me walk you through this powerful layout system in a way that actually makes sense.

Understanding the Grid: A Mental Model

Before we dive into code, let's establish a mental model. Imagine a spreadsheet. You have rows, columns, and cells where content lives. CSS Grid works similarly, but with far more flexibility. You define the structure, and then you place items within that structure—or let the grid automatically figure out where things should go.

The beauty of Grid is that it separates the concerns of layout structure from content placement. You describe the grid, then you describe where items live on that grid. This separation makes responsive design remarkably intuitive.

Setting Up Your First Grid

Creating a grid container is as simple as one line of CSS:

.container {
  display: grid;
}

But a grid without columns or rows isn't very useful. Let's add some structure:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

You've just created a grid with three columns (each 200 pixels wide) and two rows (each 100 pixels tall). Any direct children of this container become grid items and will flow into these cells automatically, left to right, top to bottom—just like words on a page.

The Magic of the fr Unit

Here's where Grid starts to feel magical. The fr unit represents a fraction of the available space. Think of it as telling the browser, "divide up whatever space is left and give each track its fair share."

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

This creates three equal-width columns that stretch to fill the container. But the real power comes when you mix values:

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

Now you have a fixed 250-pixel sidebar, and the remaining space is split equally between two columns. The layout adapts naturally as the viewport changes. The sidebar stays fixed, while the content areas flex. No media queries needed.

You can also weight the fractions:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

The middle column gets twice as much space as the others. It's intuitive—you're literally describing proportions.

The repeat() Function: Your New Best Friend

Writing 1fr 1fr 1fr 1fr 1fr gets tedious quickly. The repeat() function saves you:

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

You can get creative with patterns too:

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

This creates a pattern of six columns: 1fr, 2fr, 1fr, 2fr, 1fr, 2fr. The repeat function expands the pattern three times.

auto-fit and auto-fill: Responsive Grids Without Media Queries

This is one of my favorite features to teach because it genuinely amazes people. Instead of telling the grid exactly how many columns you want, you can let it figure out how many will fit:

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

Let's unpack this. The minmax(250px, 1fr) function says "each column should be at least 250 pixels wide, but can grow to take an equal share of remaining space." The auto-fill keyword says "create as many columns as will fit."

As the viewport shrinks, columns wrap to the next row automatically. As it grows, new columns appear. It's like the grid is reading your mind about what you want at each breakpoint.

The difference between auto-fill and auto-fit is subtle but important. auto-fill creates empty tracks when there's extra space. auto-fit collapses empty tracks and lets filled tracks expand.

/* Cards will expand to fill space if there aren't enough to fill the row */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

For most card layouts, auto-fit gives you the behavior you want—cards that stretch to fill available space when there are fewer items.

The gap Property: Finally, Proper Gutters

Remember the days of margin hacks to create spacing between grid items? Those days are over. The gap property creates consistent spacing between tracks:

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

This creates 20 pixels of space between all columns and rows. You can also set them independently:

.container {
  gap: 20px 40px; /* row-gap column-gap */
}

Or use the individual properties:

.container {
  row-gap: 20px;
  column-gap: 40px;
}

The beauty of gap is that it only creates space between items, not around the outer edges. It's exactly what you want 99% of the time.

Grid Areas: Drawing Your Layout

Here's where Grid becomes truly expressive. Grid areas let you name regions of your layout and place items by name. It's like sketching your layout directly in CSS:

.container {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}

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

Look at that grid-template-areas declaration. You can literally see the layout! The header spans all three columns, the middle row has a sidebar, main content, and an aside, and the footer spans everything again.

To change the layout for mobile, you just redraw it:

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

The content reorders itself based on your ASCII-art layout. No source order changes needed, no flexbox order property gymnastics. You draw what you want, and Grid delivers.

Placing Items with Line Numbers

Sometimes you need precise control over where items land. Grid lines are numbered starting from 1 at the start of the first track:

.item {
  grid-column: 1 / 3; /* Start at line 1, end at line 3 */
  grid-row: 2 / 4;    /* Start at line 2, end at line 4 */
}

Think of grid lines as the edges of tracks, not the tracks themselves. A three-column grid has four column lines: before the first column (1), between first and second (2), between second and third (3), and after the third (4).

You can also span a number of tracks:

.item {
  grid-column: 1 / span 2; /* Start at line 1, span 2 columns */
}

Or let the grid figure out where to start:

.item {
  grid-column: span 2; /* Span 2 columns from wherever I land */
}

Alignment: Putting Things Exactly Where You Want Them

Grid gives you fine-grained control over alignment, both for all items and individual items.

For the entire grid within its container:

.container {
  justify-content: center; /* Horizontal alignment of the whole grid */
  align-content: center;   /* Vertical alignment of the whole grid */
}

For all items within their cells:

.container {
  justify-items: center; /* Horizontal alignment of items in cells */
  align-items: center;   /* Vertical alignment of items in cells */
}

For individual items:

.item {
  justify-self: end;   /* Horizontal alignment of this item */
  align-self: start;   /* Vertical alignment of this item */
}

The place-items and place-self shorthands combine both axes:

.container {
  place-items: center; /* Centers items both horizontally and vertically */
}

Centering something in CSS used to require tricks and workarounds. With Grid, it's two lines:

.container {
  display: grid;
  place-items: center;
}

That's it. The child is centered. The decades-long CSS centering struggle is over.

Responsive Patterns That Work

Let me share some patterns I use constantly.

The Holy Grail Layout:

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Header at top, footer at bottom, content fills the middle. The footer stays at the bottom even when content is short.

The Card Grid:

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

Cards that automatically arrange themselves, wrapping naturally at any viewport size.

The Sidebar Layout:

.layout {
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr;
  gap: 2rem;
}

@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

A sidebar that's 25% of the width (but never smaller than 200px), with the main content taking the rest.

The Pancake Stack:

.stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.stack > * {
  padding: 1rem;
}

Header, stretchy main, and footer—perfect for application shells.

Grid vs. Flexbox: When to Use Which

This is probably the question I get asked most often. Here's my mental model:

Use Flexbox when:

You're working in one dimension (a row OR a column)
You want content to determine sizing
You're aligning items within a component
You need items to wrap naturally based on their size

Use Grid when:

You're working in two dimensions (rows AND columns)
You want the layout to determine sizing
You're defining the overall page structure
You need precise placement control

They're not competitors—they're collaborators. I often use Grid for page layout and Flexbox for components within grid items.

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

The page layout uses Grid for the two-dimensional structure. The card uses Flexbox because it's a single column of content, and the footer uses Flexbox to space out its children.

Common Pitfalls and How to Avoid Them

Forgetting that Grid items stretch by default: Items fill their entire cell. Use alignment properties if you don't want this behavior.

Overcomplicating simple layouts: Not everything needs Grid. A navigation bar is often better served by Flexbox.

Ignoring implicit grid behavior: When items overflow your explicit grid, Grid creates implicit tracks. Control this with grid-auto-rows and grid-auto-columns.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

Fighting the algorithm: Grid's auto-placement is smart. Before manually placing every item, see if the automatic behavior gets you most of the way there.

Wrapping Up

CSS Grid fundamentally changes how we think about web layouts. Instead of hacking elements into position with floats, margins, and positioning tricks, we now describe the layout we want, and the browser makes it happen.

The learning curve is real, but it's worth the investment. Once these concepts click, you'll find yourself building layouts in minutes that would have taken hours before. You'll write less code, create fewer media queries, and produce more maintainable stylesheets.

Start small. Convert one layout to Grid. Play with fr units. Try auto-fit with minmax. Each experiment builds your intuition. Before long, you'll reach for Grid automatically because it just makes sense.

The web platform has finally given us proper layout tools. CSS Grid is the layout system we've been waiting for, and it's been worth the wait.