CSS Grid Complete Guide

CSS Grid Layout is the most powerful layout system in CSS. It allows you to create complex, responsive layouts that were previously impossible or required heavy JavaScript workarounds. This guide covers everything from the basics to advanced techniques.

The Basics

Grid works by defining a container and placing items within it. You activate grid layout with a single property:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

The fr unit represents a fraction of available space. In the example above, the second and third columns share the remaining space equally after the first column takes its fixed 200px.

Grid Templates

You can define grid areas by name for more readable layouts:

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

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

The repeat() and auto-fill Functions

The repeat() function reduces repetition when defining columns or rows:

/* Instead of writing 12 columns manually */
.card-grid {
  grid-template-columns: repeat(12, 1fr);
}

/* Responsive auto-fit creates as many columns as fit */
.gallery {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

The auto-fit version collapses empty tracks, while auto-fill keeps them. Use auto-fit for most responsive layouts.

Placing Items

You can place items using line numbers, names, or span across tracks:

.item {
  /* Place between column lines 1 and 3 */
  grid-column: 1 / 3;

  /* Span 2 columns */
  grid-column: span 2;

  /* Name-based placement */
  grid-area: main;

  /* Row placement */
  grid-row: 1 / span 2;
}

Grid and Responsiveness

Grid makes responsive design straightforward. You can change the entire layout with media queries or use the minmax() function:

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

/* Fine-tune at specific breakpoints */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

Common Pitfalls

Grid vs Flexbox: Use Grid for two-dimensional layouts, Flexbox for one-dimensional (row or column).
Implicit grid: Items placed outside defined tracks create implicit tracks, which can cause unexpected sizing.
Overflow: Grid items can overflow their container. Use overflow: hidden or min-width: 0 on flex children to contain them.

Conclusion

CSS Grid empowers you to build layouts that were once thought impossible in pure CSS. Start with simple two-column grids and gradually explore more complex arrangements. Combine Grid with Flexbox for the best results — Grid for the overall page structure and Flexbox for component-level alignment. With practice, you'll find that most layout problems become straightforward grid exercises.

CSS Grid Complete Guide