Области грида

Для определения областей у grid-контейнера применяется свойство grid-template-areas.

Здесь у grid-контейнера определяется два столбца и три строки:

        grid-template-columns: 150px 1fr;
        grid-template-rows: 100px 1fr 100px;
        

Т В итоге у нас в гриде 3 х 2 = 6 ячеек. Но в разметке страницы определено три элемента с одноименными областями: header, sidebar, content. И свойство grid-template-areas как раз устанавливает, как эти области будут располагаться в ячейках грида:

        grid-template-areas: 	"header header"
        "sidebar content"
        "sidebar content";