The Grid Mental Model

Grid has a reputation for being complicated. The spec is enormous, the syntax looks like ASCII art, and there are about nine ways to do everything. But the core mental model fits on a napkin.

Flexbox is content-out; Grid is layout-in

Flexbox asks the children how big they'd like to be, then distributes the space. Grid draws the structure first and then drops children into it. That's the whole difference.

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature {
  grid-column: span 2;
}

The fr unit

1fr means “one share of whatever's left”. It's computed after fixed tracks and gaps, which is why it plays so nicely with gap.

Named areas

.page {
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

It reads like a picture of the layout, because it is one.