Aligning inside a grid in CSS

Aligning tracks in the container, and items inside their own cell.

.board {
  display: grid;
  grid-template-columns: repeat(3, 6rem);
  place-content: center;
  place-items: center;
  gap: 0.25rem;
  min-height: 100vh;
}

.board .score {
  place-self: start end;
}

How it works

1. place-items is the shorthand for align and justify items.
2. place-content moves the whole track set inside the container.
3. A child can override the container with place-self.

Keywords and builtins used here

• board
• display
• gap
• grid
• rem
• repeat
• score
• vh

The run, in numbers

Lines

12

Characters to type

184

Tokens

47

Three-star pace

80 tpm

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

Type this snippet

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

← Previous Next →