Rather than using row and column line numbers to place your grid items, you can define named grid areas—such as header and sidebar—and assign grid items to those names.

To set this up, you first augment your grid template with the named areas by adding the grid-template-areas property:

[var]container[/var] {
    display: grid;
    grid-template-columns: [var]col-values[/var];
    grid-template-rows: [var]row-values[/var];
    grid-template-areas: 
        '[var]grid-row1-names[/var]'
        '[var]grid-row2-names[/var]'
        …
        '[var]grid-rowN-names[/var]';
}

Here, grid-row1-names, grid-row2-names, and so on are a space-separated list of names that you want to apply to each row in your grid. Here are some notes:

• You provide a name for every cell in your grid.
• If you want to a named area to span more than one column, add the name as many times as necessary in the row to get the horizontal span size you want.
• If you want to a named area to span more than one row, add the name as many times as necessary to consecutive rows to get the vertical span size you want.
• To designate an empty cell or area use one or more periods (.) in each cell.

With your template of named grid areas complete, you then assign a name to each grid item using the grid-area property:

[var]item[/var] {
    grid-area: [var]grid-area-name[/var];
}

In the CSS Editor, I’ve updated the .container class to create a grid of 5 even columns and three rows. I’ve also included four named areas: header, main, sidebar, and footer. I’ve assigned these names to four grid items (.itemA is assigned to header, .itemB is assigned to main, and so on).