Grid отлично подходит для общей структуры страницы: сайдбар, контент, шапка, футер. Это двухмерная сетка, где удобно управлять и строками, и колонками.
Шаг 1. Создаем разметку будущего макета
<div class="layout">
<header class="header">Шапка</header>
<aside class="sidebar">Сайдбар</aside>
<main class="content">Контент статьи</main>
<footer class="footer">Футер</footer>
</div>Шаг 2. Включаем Grid и задаем области
.layout {
min-height: 100vh;
display: grid;
gap: 16px;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }Теперь каждый блок привязан к своей зоне через grid-area.
Шаг 3. Делаем адаптивную перестройку
На узких экранах обычно удобнее показать блоки в одну колонку.
@media (max-width: 900px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}Шаг 4. Сетка карточек внутри контента
Grid полезен не только для всего layout, но и для списков карточек.
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}Частые ошибки
- Слишком сложная сетка там, где хватило бы Flexbox.
- Жесткие размеры колонок без адаптива.
- Нет медиа-правил для мобильного сценария.
Мини-чеклист
- Есть явная схема
grid-template-areas. - Колонки и строки читаемы и логичны.
- Есть мобильная версия через
@media. - Вложенные сетки не конфликтуют со внешним layout.
Используй Grid для крупной структуры, а Flexbox — для внутреннего выравнивания элементов в блоке.
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →