A grid area is a portion of a CSS Grid that spans one or more cells. A named grid area gives that rectangle a shared name, such as header, nav, main, sidebar, or footer. section 13.7 section 13.8
Define the names on the grid container with grid-template-areas, writing one space-separated name for every cell in each row. Repeat a name to make an area wider or taller; use periods for empty cells. Then assign each grid item with grid-area. section 13.8
A classic page layout
A five-column grid can describe a familiar layout in plain sight: 'header header header header header', 'nav nav nav nav nav', 'main main main main sidebar', and 'footer footer footer footer footer'. Assign the corresponding items with grid-area: header, nav, main, sidebar, and footer. The browser then places and spans those items according to the named map—rather less mysterious than wrestling a layout library. section 13.8
