Grid Basics

display: grid

display: grid on the parent, then grid-template-columns and grid-template-rows define the track sizes. Children fall into cells automatically.

A basic 3-column grid

1fr splits remaining space into equal fractions.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Placing items

gap sets spacing between cells. grid-column: 1 / 3 and grid-row: 2 / 4 place an item across specific track lines, letting it span multiple cells.

Quick check: What does the `fr` unit represent in Grid?

• A fixed number of pixels
• A fraction of the available space
• A percentage of the font size