CSS Grid Layout: полное руководство по созданию современных макетов страниц

Основы: Что такое CSS Grid и чем он отличается от Flexbox

Прежде чем писать код, важно понять философию технологии.

• Flexbox (1D): Работает в одном измерении — либо в строку, либо в столбец. Идеален для выравнивания компонентов внутри блока (навигационное меню, кнопки в карточке).
• CSS Grid (2D): Управляет сразу двумя осями. Вы определяете строки (rows) и столбцы (columns), создавая строгую матрицу, в которую помещаете элементы.

Сетка в CSS состоит из контейнера (grid-контейнер) и его прямых потомков (grid-элементы). Все остальное пространство заполняется неявными линиями или остается пустым.

Поддержка браузерами CSS Grid 2025

Технология полностью поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) начиная с 2017 года. Использование гридов в продакшене абсолютно безопасно. Для старых версий Internet Explorer существует устаревшая спецификация (-ms-grid), но ее использование в 2025 году требуется крайне редко.

Свойства контейнера: строим фундамент сетки

Чтобы превратить обычный блок `

` в сетку, достаточно задать ему свойство `display: grid`.

Display grid примеры и именованные области (grid-area)

Самый наглядный способ описать структуру страницы — использовать шаблон областей. Это позволяет визуализировать макет сайта на гридах прямо в стилях:

cssКопировать

.container {
  display: grid;
  /* Определение структуры через пробелы */
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

/* Привязка элементов к областям */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Этот пример создает классический макет Holy Grail (шапка, сайдбар, контент, подвал) без единой строчки медиа-запросов.

Fr единица измерения CSS и gap свойство CSS

Вместо процентов разработчики используют гибкую единицу fr (fraction — доля свободного места). Если вы зададите grid-template-columns: 1fr 2fr, второй столбец всегда будет ровно в два раза шире первого, независимо от ширины экрана.

Для отступов между ячейками больше не нужно использовать margin (который ломал обтекание во float-верстке). Используйте универсальное свойство gap (ранее grid-gap):

cssКопировать

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Отступы по вертикали и горизонтали */
}

Продвинутые функции: автоматизация и адаптивность

Настоящая сила Grid раскрывается при работе с динамическим контентом.

Grid-template-columns rows и функция repeat()

Функция repeat() избавляет от дублирования кода. Вместо 1fr 1fr 1fr 1fr пишем repeat(4, 1fr). Она отлично сочетается с ключевыми словами:

• auto-fill: Создает столько колонок, сколько влезет в контейнер фиксированной ширины.
• auto-fit: Расширяет существующие колонки, чтобы заполнить пустое место.
• minmax(min, max): Задает минимальный и максимальный размер трека. Это основа адаптивной сетки CSS Grid без медиа-запросов.

Пример идеальной адаптивной галереи:

cssКопировать

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

Здесь браузер сам создаст новую колонку, когда в текущей строке появляется место для элемента шириной минимум 250px.

Nested Grid вложенные сетки

Любой grid-элемент сам может стать grid-контейнером. Это позволяет строить сложные информационные панели (дашборды), где внутренняя структура карточки никак не зависит от внешней сетки страницы.

Z-index в CSS Grid слоях

Гриды позволяют накладывать элементы друг на друга в одной ячейке. Порядок наложения управляется свойством z-index или порядком следования в HTML. Это незаменимо для создания декоративных эффектов, полупрозрачных оверлеев или текстур поверх изображений.

Алгоритм плотной упаковки (grid-auto-flow dense)

Обычно алгоритм размещения ищет ближайшее свободное место после текущего элемента. Если элемент не влезает, образуется дыра. Ключевое слово dense заставляет алгоритм «запихивать» следующие мелкие элементы в свободные ячейки выше по потоку, исключая появление случайных пустот в галерее.

Как сделать 12 колоночную сетку

Классическая система сеток Bootstrap легко воспроизводится средствами чистого CSS:

cssКопировать

.grid-system {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 равных колонок */
  gap: 1rem;
}

.col-span-6 {
  grid-column: span 6; /* Занимает 6 колонок из 12 */
}

.col-span-4 {
  grid-column: span 4; /* Занимает 4 колонки из 12 */
}

Это дает гораздо большую гибкость, так как ряды могут быть разной высоты, а элементы могут начинаться с любой линии.

FAQ-Блок для расширенных сниппетов

Когда лучше использовать Flexbox вместо Grid? Используйте Flexbox для навигационных панелей, списков товаров в корзине, выравнивания текста и иконок по центру — то есть там, где важна ось, а не плоскость. Используйте Grid для построения основного каркаса страницы (Header, Footer, Sidebar, Main Content).

Можно ли совмещать Grid и Flexbox? Да, это лучшая практика современного фронтенда. Внешний каркас страницы строится на Grid, а компоненты внутри ячеек (например, форма авторизации или список тегов) центрируются с помощью Flexbox.

Профессиональная верстка: услуги разработчика

Создание сложной, семантической и производительной сетки требует глубокого понимания алгоритмов браузера. Ошибки в архитектуре грида приводят к тому, что сайт выглядит идеально на вашем мониторе, но рассыпается на планшетах.

Если вашему проекту нужен уникальный дизайн, который невозможно собрать на стандартных конструкторах, закажите профессиональную верстку макета на заказ CSS Grid. Опытные специалисты создадут надежную базу, которая обеспечит высокую оценку Core Web Vitals и легкость дальнейшей поддержки. Также доступны комплексные услуги frontend разработчика Grid для интеграции анимации и сложных интерактивных состояний в вашу сетку.