CSS Grid

Grid Is for Two Dimensions

Flexbox is usually best for arranging items in one direction. Grid is best when rows and columns need to work together.

Use Grid for page layouts, galleries, cards, product listings, dashboards, feature sections, and areas where vertical and horizontal alignment both matter.

Flexbox vs Grid

Grid Mental Model

Basic Grid

Start by turning the parent into a grid. Then define the columns, rows, and gaps the direct children should use.

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

The `fr` Unit

The fr unit means a share of the available space. Three 1fr columns split the available width into three equal parts.

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

.sidebar-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
}

`repeat()` Shorthand

repeat() lets you write repeated tracks more clearly. These two examples create the same three equal columns.

.gallery-longhand {
  grid-template-columns: 1fr 1fr 1fr;
}

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

Responsive Card Grid

This pattern creates cards that wrap into as many columns as fit. It is useful for projects, products, articles, image galleries, and resource lists.

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

Breaking Down `auto-fit` and `minmax()`

If cards become too narrow, increase the minimum value in minmax(). If too few cards fit, lower the minimum value carefully.

Media Query Strategy

You can also change the number of columns with media queries. This is easier to understand when the layout needs specific breakpoints.

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 72rem) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Placing Items

Grid items can span across columns or rows. This is useful for featured cards, large images, or layouts where one item needs more space.

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

.featured-card {
  grid-column: span 2;
}

Sidebar Layout

A common page pattern is a sidebar beside main content. On small screens, stack the layout into one column.

.page-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .page-layout {
    grid-template-columns: 16rem 1fr;
  }
}

Grid Areas

Grid areas can make a page layout readable in CSS. Use them when the structure is clear and not too complex.

.page {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 16rem 1fr;
}

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

Alignment in Grid

Grid has alignment tools for items inside their cells and for the whole grid inside the container.

.logo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
}

Use DevTools Grid Overlays

Turn on the Grid overlay in DevTools to see columns, rows, line numbers, gaps, and grid areas. It makes abstract layout rules visible.

• Inspect the grid container, not only an individual card.
• Turn on line numbers when using grid-column or grid-row.
• Use the overlay to confirm whether gaps and tracks match your plan.

Common Layout Patterns

Common Mistakes