Grid, in four rules

Overview

A grid is not a layout system you switch on. It is four properties, and everything else in the specification is a shorthand for one of them. This lesson is those four, in the order you will reach for them.

The four

grid-template-columns with minmax() in it is most of the layouts you will ever ship. gap is why margins mostly leave your stylesheet once grid arrives. The implicit grid is where the confusion lives. Alignment is two axes and four keywords, and the fact that align-items defaults to stretch is what makes a row of cards match without you asking.

Naming areas is a readability decision, not a layout one. You can build every page on this site without ever writing one.

In this lesson

Lay out a responsive grid with one propertySay what the implicit grid is doing and whyChoose between gap and margin without guessingMatch a row of cards without setting a height

Knowledge check

One question. It is not marked and it is not stored — it is here because answering something is how you find out whether you were following.

Transcript

0:00A grid is not a layout system you switch on. It is four properties, and everything else in the specification is a shorthand for them.0:24The first is grid-template-columns. Nearly every layout you ship is this one property with minmax in it.0:51The second is gap — and gap is the reason margins mostly leave your stylesheet when grid arrives.1:19Third: the implicit grid. Rows you never declared. This is where most of the confusion lives, so we are going to sit here a while.2:04And fourth, alignment. Two axes, four keywords, and the fact that align-items defaults to stretch — which is what makes cards match.2:47Everything after this is naming. Areas, lines, spans: useful, and none of it necessary to lay out a page today.

Resources

zipStarter filesThe stylesheet at the state this lesson begins18 KB pdfGrid cheatsheetOne page, the four properties96 KB cssThe finished stylesheetWhat we end on, commented4 KB

Notes

This demo keeps nothing. A real course saves notes on the server, and a demo that wrote to localStorage would be teaching a persistence trick rather than a design system.

Next · Lesson 7 Flex, and when not to reach for it After the container and the gutter, this is where grid stops being a mystery.