🎓 A1Learner
🔍

CSS Grid Items

A grid item can span several tracks instead of sitting in one cell. grid-column sets how many columns an item covers, and grid-row does the same downward.

Span two columns

The first item starts at line 1 and ends at line 3. It covers two tracks and the gap between them.

ul {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  width: 320px;
  gap: 10px;
}
li:first-child {
  grid-column: 1 / 3;
}

Span with a keyword

span 2 asks for two tracks without naming an end line. The item takes the same width as the line version.

ul {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  width: 320px;
  gap: 10px;
}
li:first-child {
  grid-column: span 2;
}

A header across the box

The box becomes a grid with two columns. The heading spans both columns, and the paragraph and button share the row below.

.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
h2 {
  grid-column: 1 / 3;
}

Example

ul {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  width: 320px;
  gap: 10px;
}
li {
  background-color: lightblue;
  padding: 6px;
}
li:first-child {
  grid-column: 1 / 3;
}

Key points

  • Grid lines are the edges between tracks
  • Line numbers count from 1, and the end line is included in the count
  • grid-column 1 / 3 starts at line 1 and ends at line 3
  • The span keyword names a count of tracks instead of an end line
  • Negative line numbers count back from the end of the grid

In this example, the list becomes a grid with three columns of 100 pixels. Every item gets a pale background and some padding. The first item runs from line 1 to line 3, so it spans the first two columns. The other two items share the row below it.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

How many columns does grid-column: 1 / 3 cover?