CSS Grid Layout: A Practical Guide

CSS Grid is a two-dimensional layout system that fundamentally changes how we build web layouts. It lets you control both columns and rows simultaneously.

Creating a Basic Grid

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

Spanning Cells

.featured {
  grid-column: 1 / 3;  /* spans 2 columns */
  grid-row: 1 / 3;     /* spans 2 rows */
}

Named Grid Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }

Auto-Fit and Minmax

Create responsive grids without media queries:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));