Типова cтандартна сторінка має шапку, підвал, бічне меню і основний блок для виведення інформації.

Найпростіший Html-код  такого макету  буде таким:

 <div class="wraper">
  <header>Шапка</header>
  <nav>Меню</nav>
  <section>Основний блок</section>
  <footer>Підвал</footer>
</div&gt
;

Типовою сіткою для макету сторінки є 12-колонкова сітка:

 

.wraper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
  grid-gap: 5px;
}

Властивість grid-template-areas 

Властивість grid-template-areas визначає шаблон сітки, використовуючи імена grid-областей, які задані за допомогою властивості grid-area (ця властивість застосовується до grid-елементів.

header {
    grid-area: h;
}
menu {
    grid-area: m;
}
section{
    grid-area: s;
}
footer {
   grid-area: f;
}

Повторення назви області у якості значень властивості grid-template-areas  призводить до того, що вміст охоплює ці осередки.

 Точка означає вільну позицію. Сам синтаксис надає візуалізацію структури сітки.

grid-template-areas:
        "h h h h h h h h h h h h h"
        "m m s s s s s s s s s s"
        "f f f f f f f f f f f f f";

Відеоурок "Властивість Grid-template-areas"

1. Створити мекети сіток згідно зразка: