Grid Tracks

Define columns and rows, then place direct children into the resulting cells.

Grid foundations

display: grid makes the direct children grid items. Columns run across the page; rows run down it.

1

2

3

4

5

6

grid-template-columns: 1fr 2fr 1fr gives the middle column twice the share. grid-template-rows: 4rem 6rem defines two row heights.

Gap belongs to the container

gap adds space between tracks, not around the outside edge. The stage padding creates the outer space.

Read the CSS Grid gauge

Important HTML

Direct children become grid items.

<div class="grid-stage tracks-demo">
  <div class="cell">1</div>…
</div>

Important CSS

Template columns and rows define the track list.

.tracks-demo {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 4rem 6rem;
  gap: 8px;
}