grid-template-areas makes a layout readable

Placing items by line number works and produces a stylesheet nobody can picture. Named areas draw the layout in the source.

.page {
    display: grid;
    grid-template-columns: 16rem 1fr 14rem;
    grid-template-areas:
        "nav  head head"
        "nav  main toc"
        "nav  foot foot";
}

.sidebar { grid-area: nav; }
.content { grid-area: main; }

The ASCII picture is the documentation, and rearranging the layout is editing it rather than renumbering lines. A period marks an empty cell. The constraint worth knowing: an area must be rectangular, so an L-shaped region is not expressible — which is almost never what you wanted anyway.