CSS Grid Layout for Beginners

Learn CSS Grid with practical examples. Create two-dimensional layouts with grid-template-columns, gap, minmax and repeat.

Make a grid container

CSS Grid arranges items in rows and columns. Add display: grid to the parent, then define the columns you need.

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

Create responsive columns

For cards that fit the available width, combine repeat(), auto-fit and minmax(). The browser fits as many columns as it can while keeping each at least 15rem wide.

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

Place items across tracks

Use line numbers or named areas when an item needs to span multiple columns. Start with the simple responsive pattern above for card collections.

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

Understand grid tracks and the fr unit

A grid track is a row or column. The fr unit divides available space between flexible tracks after fixed sizes and gaps are accounted for. For example, 1fr 2fr gives the second flexible column twice the available share of the first.

Make an item span the grid

Grid items can span a number of tracks or run from one grid line to another. This example lets a featured card cover both columns:

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

.feature-card {
  grid-column: 1 / -1;
}

The two-column definition matters here: the item needs two available columns to span both. On a single-column layout, remove the span or apply it only at a wider breakpoint.

CSS Grid questions

What does minmax() do?

minmax(minimum, maximum) sets a lower and upper size for a grid track. In the responsive card pattern above, each column is at least 15rem and can grow to share the remaining space.

Should I use Grid or Flexbox for cards?

Use whichever expresses the layout most clearly. A wrapping row of independent cards can work well with either; choose Grid when you want to control columns and rows together.