Placing items on grid lines in CSS

Spanning tracks by line number, and letting the browser fill the gaps.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 8rem;
  grid-auto-flow: dense;
  gap: 0.5rem;
}

.gallery .wide {
  grid-column: span 2;
}

.gallery .tall {
  grid-row: span 2;
}

.gallery .hero {
  grid-column: 1 / -1;
}

How it works

1. grid-column: 1 / 3 spans from line one to line three.
2. span 2 is the relative form and survives a reflow.
3. grid-auto-flow: dense backfills the holes.

Keywords and builtins used here

• display
• gallery
• gap
• grid
• hero
• rem
• repeat
• tall
• wide

The run, in numbers

Lines

19

Characters to type

244

Tokens

66

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 50 seconds.

Type this snippet

Step 2 of 7 in Grid, step 8 of 24 in Flexbox & grid.

← Previous Next →