The key thing is that it’s the one line of `grid-template: auto 1fr auto / auto 1fr auto` that’s doing the heavy lifting in the layout. The job of assigning el

The key thing is that it’s the one line of `grid-template: auto 1fr auto / auto 1fr auto` that’s doing the heavy lifting in the layout. The job of assigning elements to their places could also use named areas: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; grid-template-areas: "header header header" "left main right" "footer footer footer"; } .ex5 header { grid-area: header; } .ex5 .left-side { grid-area: left; } .ex5 main { grid-area: main; } .ex5 .right-side { grid-area: right; } .ex5 footer { grid-area: footer; } Or you could lean on auto placement more heavily: in the original code, the left/main/right grid-column declarations are superfluous, and `1 / -1` is arguably clearer than `1 / 4` for the header and footer: .ex5 .parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; } .ex5 header, .ex5 footer { grid-column: 1 / -1; }