Как сделать раскладку страницы на grid

Короткий ответ

Назовите области в grid-template-areas и разложите по ним элементы через grid-area:

<style>
  .page { display: grid; gap: 6px; grid-template-columns: 90px 1fr 90px; grid-template-rows: auto 1fr auto; min-height: 220px;
    grid-template-areas: "head head head" "nav main ads" "foot foot foot"; }
  .page > * { padding: 8px; background: lavender; }
  header { grid-area: head; } nav { grid-area: nav; } main { grid-area: main; background: whitesmoke; }
  aside { grid-area: ads; } footer { grid-area: foot; }
</style>
 
<div class="page">
  <header>Header</header><nav>Menu</nav><main>Content</main><aside>Ads</aside><footer>Footer</footer>
</div>

Каждая строка в кавычках — ряд сетки, каждое слово — ячейка. Повтор имени растягивает область на несколько ячеек.

На телефоне

Главное удобство областей — раскладку меняют, не трогая HTML. Для узкого экрана достаточно переписать карту в одну колонку:

@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "nav" "main" "ads" "foot";
  }
}

Частая ошибка

Карта должна быть прямоугольной: в каждой строке одинаковое число ячеек, а область — сплошной прямоугольник. Если написать, например, "head head" "nav main ads", браузер посчитает всё правило ошибочным и молча его проигнорирует. Пустую ячейку обозначают точкой.