CSS и вёрстка

Готовые макеты страницы

Двенадцать раскладок на CSS Grid: святой Грааль, сайдбары, дашборд, карточная стена, мозаика, статья с оглавлением и центрирование. У каждой — схема, готовый CSS с областями и вариант в одну колонку для телефона.

Раскладка

Шапка, подвал и три колонки: навигация, содержимое, боковая колонка.

Размеры

Промежуток: 16 px Боковое меню: 220 px Вторая колонка: 260 px Переход в одну колонку: 768 px

Превью

Шапка

Меню

Содержимое

Боковая

Подвал

Схема показана в настольном виде. На экране уже 768 px и меньше раскладка выстраивается в одну колонку.

CSS

.layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "header header header"
    "nav main aside"
    "footer footer footer";
}

.layout .header {
  grid-area: header;
}

.layout .nav {
  grid-area: nav;
}

.layout .main {
  grid-area: main;
}

.layout .aside {
  grid-area: aside;
}

.layout .footer {
  grid-area: footer;
}

@media (max-width: 767px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
  }
}

HTML

<div class="layout">
  <header class="header">Шапка</header>
  <nav class="nav">Меню</nav>
  <main class="main">Содержимое</main>
  <aside class="aside">Боковая</aside>
  <footer class="footer">Подвал</footer>
</div>

Разметка смысловая: header, nav, main, aside и footer вместо пяти одинаковых div.