grid-template-areas

Пример 1 grid-template-areas:

<div class="cont">
  <div style="grid-area: title; background:brown;">1</div>
  <div style="grid-area: nav; background:yellow;">2</div>
  <div style="grid-area: main; background:orange;">3</div>
  <div style="grid-area: aside; background:lightblue;">4</div>
  <div style="grid-area: footer; background:blue;">5</div>
</div>

<style>
.cont {	display: grid;
	grid-template-columns: 100px 100px 100px 100px 100px;
	grid-template-rows:    100px 100px 100px 100px;
	grid-template-areas:
		'title title title title aside'
		'nav main main main aside'
		'nav main main main aside'
		'footer footer footer footer footer';
}
</style>

Получим:

Пример 2:

.item-a {grid-area: header;}
.item-b {grid-area: main;}
.item-c {grid-area: sidebar;}
.item-d {grid-area: footer;}
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Это создаст сетку из четырех столбцов в ширину и трех рядов в высоту. Весь верхний ряд будет состоять из области заголовка. Средний ряд будет состоять из двух основных областей, одной пустой ячейки и одной области боковой панели. Последний ряд все нижний колонтитул.

* Каждая строка в вашей декларации должна иметь одинаковое количество ячеек.

Вы можете использовать любое количество смежных периодов, чтобы объявить одну пустую ячейку. Пока периоды не имеют пробелов между ними, они представляют одну ячейку.

Обратите внимание, что вы не называете строки с этим синтаксисом, а только области. Когда вы используете этот синтаксис, строки на обоих концах областей фактически получают имена автоматически. Если имя вашей области сетки - foo, именем начальной строки строки и строки начального столбца будет foo-start, а именем ее последней строки строки и последней строки столбца будет foo-end. Это означает, что некоторые строки могут иметь несколько имен, например крайнюю левую строку в приведенном выше примере, которая будет иметь три имени: header-start, main-start и footer-start.

Варианты написания:

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

--

Подробнее на MDN