A CSS grid with named lines reads like the design

Placing items with numeric line indexes works and becomes unreadable the moment a column is inserted, because every number after it shifts.

.page {
    display: grid;
    grid-template-columns:
        [full-start] 1fr
        [main-start] minmax(0, 60rem)
        [main-end] 1fr [full-end];
}

.content { grid-column: main; }
.hero    { grid-column: full; }

Naming a line main-start and main-end creates an implicit area called main, so grid-column: main works without declaring template areas — which is the trick that is not obvious from the specification. minmax(0, 60rem) rather than a bare maximum is the guard against grid children with long unbreakable content blowing the column out, which is the most common grid layout bug and takes an hour to find.