Grid columns in CSS

A grid defined by its column track list, with content flowing into rows.

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

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  row-gap: 2rem;
}

How it works

1. repeat() saves writing the same track twice.
2. fr divides the space left after fixed tracks.
3. gap applies to both axes unless you split it.

Keywords and builtins used here

• display
• gap
• grid
• layout
• metrics
• rem
• repeat

The run, in numbers

Lines

12

Characters to type

174

Tokens

48

Three-star pace

80 tpm

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

Type this snippet

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

← Previous Next →