«Создание адаптивных веб сайтов с CSS Grid и Flexbox»
Введение
Ты наверняка замечал, что сайты на телефоне выглядят иначе, чем на компьютере. Это называется адаптивная вёрстка — когда дизайн подстраивается под размер экрана. В этом помогают две технологии: CSS Grid и Flexbox.
CSS Grid — как тетрадный лист в клетку. Он помогает разбить страницу на строки и столбцы (например, сделать шапку, сайдбар, основной контент и подвал).
Flexbox — как линейка, на которой можно выстроить предметы в ряд или столбец (например, пункты меню или карточки товаров).
Правило простое: Grid — для общей структуры, Flexbox — для отдельных блоков.
CSS Grid: начнём с простого
Чтобы включить Grid, нужно задать контейнеру свойство display: grid.
Основные команды:
- grid-template-columns — говорит, сколько и каких столбцов нужно (например, 1fr 1fr — два одинаковых столбца);
- gap — задаёт отступы между ячейками;
- repeat() — помогает быстро создать много одинаковых колонок.
Пример: сетка из двух одинаковых колонок:
Flexbox: ещё проще
Flexbox помогает выстроить элементы в линию.
Основные команды:
display: flex включает Flexbox, justify-content выравнивает элементы по горизонтали (например, space-between распределяет их с равными отступами), а flex-direction меняет направление расположения: row — в ряд, column — в столбец.
Пример: меню в одну строку:
Адаптивность: магия медиазапросов
Медиазапросы (@media) — это «условия» для стилей. Например: «если экран меньше 768 px, сделай меню вертикальным».
Пример:
Как их сочетать?
Часто используют обе технологии вместе:
- Grid — чтобы разделить страницу на большие зоны (например, сайдбар слева, контент справа);
- Flexbox — чтобы внутри этих зон красиво расположить элементы (кнопки, карточки, ссылки).
Пример комбинированного макета:
Практические советы для новичков
Начинай с мобильной версии (mobile‑first) — сначала делай макет для телефона, затем добавляй стили для больших экранов. Используй fr в Grid: он автоматически поделит пространство между колонками. Проверяй результат в браузере через инструменты разработчика (F12), меняя размер окна — так ты увидишь, как ведёт себя макет. Экспериментируй: пробуй разные значения gap (отступы), fr (распределение пространства) и flex-direction (горизонтальное/вертикальное расположение). Помни: Grid — для структуры страницы (шапка, сайдбар, контент), Flexbox — для элементов внутри блоков (меню, кнопки, карточки). Так код будет чище, а вёрстка — предсказуемее.
Заключение
Что нужно запомнить:
1. Grid — для двумерных сеток (строки + столбцы).
2. Flexbox — для одномерной компоновки (ряд или столбец).
3. Медиазапросы — чтобы сайт менялся на разных экранах.
4. Комбинация Grid + Flexbox — лучший вариант для адаптивной вёрстки.
Попробуй повторить примеры из статьи — так ты быстрее поймёшь, как работают эти технологии.