До появления CSS Grid Layout создание сложных двумерных макетов требовало либо таблиц, либо float-обёрток, либо фреймворков вроде Bootstrap — и всё равно часто заканчивалось хакингом. Grid решил эту проблему на уровне браузера: двумерная раскладка с явным контролем строк и столбцов. За 10+ лет работы мы убедились: CSS Grid — незаменимый инструмент для сложных лейаутов, особенно когда нужно выровнять содержимое карточек по высоте без JavaScript. По нашим оценкам, Grid сокращает время разработки на 30–50% по сравнению с традиционными подходами, а код становится читаемым и легко поддерживаемым. В этой статье разберём ключевые приёмы: от выбора между Grid и Flexbox до subgrid и masonry, а также типичные ошибки.
Когда выбирать CSS Grid, а когда Flexbox?
Это правило работает в 90% случаев: Grid — для двумерных раскладок, Flexbox — для одномерных. Вот наглядное сравнение:
| Сценарий | Инструмент | Почему |
|---|---|---|
| Основной макет страницы (header, sidebar, main, footer) | Grid | Двумерное позиционирование |
| Галерея карточек | Grid | Сетка с возможностью span |
| Навигационный список | Flexbox | Одномерная строка |
| Кнопка с иконкой и текстом | Flexbox | Выравнивание по центру |
| Форма с полями | Grid или Flexbox | Зависит от сложности |
Но есть и гибридные решения: Grid для сетки карточек, а внутри каждой карточки Flexbox для выравнивания контента. Grid Layout в среднем в 2 раза сокращает объём CSS-кода для сложных макетов по сравнению с чистым Flexbox.
Почему grid-template-areas упрощает поддержку?
grid-template-areas — визуальная запись раскладки прямо в CSS. При изменении медиазапроса достаточно перестроить значения, не трогая дочерние элементы.
.layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr auto; min-height: 100dvh; } .layout__header { grid-area: header; } .layout__sidebar { grid-area: sidebar; } .layout__main { grid-area: main; } .layout__footer { grid-area: footer; } @media (max-width: 768px) { .layout { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; } } Как сделать адаптивную сетку без медиазапросов?
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } auto-fill + minmax — сетка сама решает, сколько колонок поместится. На мобильных — 1 колонка, на планшете — 2–3, на десктопе — 4+. Ни одного медиазапроса.
Разница auto-fill vs auto-fit:
-
auto-fill— создаёт пустые треки, если элементов меньше, чем колонок -
auto-fit— пустые треки сжимаются до нуля, элементы растягиваются
Что такое subgrid и как он работает?
subgrid поддерживается во всех современных браузерах (Chrome, Firefox, Safari, Edge). Позволяет дочерним элементам выравниваться по родительской сетке:
.product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; } .product-card__title { grid-row: 1; } .product-card__description { grid-row: 2; } .product-card__action { grid-row: 3; align-self: end; } Без subgrid выравнивание содержимого карточек по высоте требовало JavaScript или костылей. Теперь — два свойства CSS.
Плотная упаковка (masonry) и перекрытие элементов
Для masonry используем grid-auto-rows с маленьким шагом и span для разных высот:
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 10px; gap: 16px; } .gallery__item--tall { grid-row: span 20; } .gallery__item--short { grid-row: span 12; } Также существует CSS-only masonry через grid-template-rows: masonry, но пока экспериментально. Для продакшена лучше использовать первый подход.
Перекрытие элементов без position: absolute — одна из фишек Grid Layout:
.hero-banner { display: grid; grid-template-areas: "content"; } .hero-banner__image, .hero-banner__content { grid-area: content; } .hero-banner__image { width: 100%; height: 100%; object-fit: cover; } .hero-banner__content { z-index: 1; padding: 48px; align-self: end; background: linear-gradient(transparent, rgba(0,0,0,0.7)); } Какие типичные ошибки допускают при работе с CSS Grid?
- Применение Grid для одномерных списков. Flexbox проще и быстрее для навигации или иконок. Grid избыточен.
- Забывают про min-height: 100dvh. Без этого макет может не растянуться на всю высоту экрана, особенно в дашбордах.
- Игнорируют кроссбраузерную верстку. Subgrid и masonry требуют проверки в разных браузерах. Рекомендуем тестировать в Chrome, Firefox и Safari.
Правильная настройка grid-template-columns с auto-fill и minmax улучшает LCP и общие Core Web Vitals за счёт уменьшения пересчёта раскладки.
Процесс работы над Grid-макетом
- Анализ макета — определяем зоны и их поведение на разных разрешениях.
- Проектирование сетки — выбираем количество колонок, gutter, breakpoints.
- Реализация — пишем CSS с использованием grid-template-areas или явных линий.
- Тестирование — проверяем в Chrome, Firefox, Safari, Edge, а также на мобильных устройствах.
- Деплой — передаём код с комментариями и рекомендациями.
Сроки ориентировочно
| Тип вёрстки | Время |
|---|---|
| Простая страница (hero + 3–4 секции) | 1 день |
| Сложный макет с sidebar + cards | 1.5–2 дня |
| Дашборд с многоколоночным лэйаутом | 2–3 дня |
Стоимость рассчитывается индивидуально в зависимости от сложности.
Что входит в работу
- Консультация по выбору подхода (Grid/Flexbox/гибрид)
- Разработка адаптивной сетки под все устройства (Mobile First)
- Тестирование кроссбраузерности
- Передача кода с комментариями
- 1 месяц бесплатной поддержки
Готовы начать? Свяжитесь с нами, чтобы обсудить ваш проект. Закажите разработку и получите консультацию — мы поможем выбрать оптимальное решение для вашего макета. Гарантируем качество и кроссбраузерность.