CSS Grid

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

Goes on: the container.

One value per column. fr is a share of what is left after the fixed tracks and the gaps are taken out, so here the last column is twice the middle one and the first never changes.

What it replaced: percentages that had to add up to 100 minus the gutters, worked out by hand.

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

Goes on: the container.

Fit as many 140px columns as the container allows, then stretch them to fill the row. The column count changes by itself as the container changes, with no media query. The min(100%, …) keeps a single column from overflowing a container narrower than 140px. Drag the corner of the figure.

What it replaced: three or four breakpoints, each resetting a width and an nth-child margin.

.cards {
  gap: 24px 12px;   /* rows, then columns */
}

Goes on: the container.

The same property as in flexbox. Two values set the row gap and the column gap separately.

.page {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

Goes on: the container.

Each string is a row and each word is a cell. Repeating a name makes the area bigger, and a full stop leaves a cell empty. Every area has to be a rectangle. If one is not, the browser throws away the whole declaration. The widget above writes this for you.

.cards {
  grid-auto-rows: minmax(90px, auto);
}

Goes on: the container.

Items past the end of your template land in implicit rows, which are sized to their content unless you say otherwise. This gives every such row a floor of 90px and still lets it grow for long content.

What it replaced: a min-height on every card.

.icons {
  display: grid;
  place-items: center;
}

Goes on: the container.

Shorthand for align-items and justify-items. Items are stretched to fill their cell unless told otherwise. This centres each one in its own cell, both ways. On a grid with a single cell it is the shortest way to centre anything.

.feature {
  grid-column: span 2;
  grid-row: span 2;
}

Goes on: the item.

span counts tracks from wherever the item lands. The other items flow around it, and you did not have to touch them.

What it replaced: a table with colspan and rowspan.

.banner {
  grid-column: 1 / -1;
}

Goes on: the item.

From the first column line to the last. Negative numbers count from the end, so this is full width however many columns the grid has at the moment. It only counts columns you declared, not implicit ones.

.site-header {
  grid-area: header;
}

Goes on: the item.

The other half of card four. The HTML order no longer decides where a region sits, so one media query that rewrites the template strings can rearrange the whole page.

Careful. As with order in flexbox, this moves pixels only. Keep the HTML in the order it should be read.

A grid only aligns its direct children. Three pricing cards are three separate boxes, so a long title in one pushes its button lower than its neighbours’. With subgrid a card borrows its parent’s row lines for its own children, and titles, text and buttons line up across all three cards.

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.card  { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

Goes on: the item, which must itself be a grid.