CSS Grid: практическое руководство по верстке сеток с примерами

Основы CSS Grid: с чего начать

CSS Grid Layout — это мощная система для создания двумерных макетов в вебе. В отличие от Flexbox, который работает в одном измерении, Grid позволяет контролировать и строки, и столбцы одновременно. Чтобы начать работу, достаточно объявить display: grid для контейнера. Элементы внутри автоматически становятся grid-элементами.

Базовый пример создания простой сетки:

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 20px;
}

Здесь мы создаем три колонки равной ширины (1fr — fractional unit), автоматическую высоту строк и промежуток между элементами 20px.

Ключевые свойства CSS Grid

Для эффективной работы с Grid нужно освоить несколько основных свойств:

Свойства контейнера

• grid-template-columns — определяет количество и размеры колонок
• grid-template-rows — определяет количество и размеры строк
• grid-template-areas — задает именованные области сетки
• gap — расстояние между элементами (ранее grid-gap)
• justify-items — выравнивание по горизонтали
• align-items — выравнивание по вертикали

Свойства элементов

• grid-column — позиционирование элемента по колонкам
• grid-row — позиционирование элемента по строкам
• grid-area — присвоение имени области или позиционирование
• justify-self — индивидуальное выравнивание по горизонтали
• align-self — индивидуальное выравнивание по вертикали

Практические примеры верстки

Пример 1: Базовая карточная сетка

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; padding: 20px;
}

Этот код создает адаптивную сетку карточек, которые автоматически переносятся и подстраиваются под ширину экрана. Минимальная ширина карточки — 300px, максимальная — 1fr.

Пример 2: Макет страницы с областями

.page-layout { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh;
} .header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Классический макет страницы с header, sidebar, content и footer. Области четко определены и легко переставляются.

Сравнение CSS Grid и Flexbox

Чек-лист по работе с CSS Grid

• ✓ Всегда задавайте gap вместо margins для промежутков
• ✓ Используйте fr-единицы для гибких размеров
• ✓ Тестируйте на разных размерах экрана
• ✓ Проверяйте поддержку в целевых браузерах
• ✓ Комбинируйте Grid с Flexbox где это уместно
• ✓ Используйте именованные области для сложных макетов
• ✓ Избегайте абсолютных единиц для адаптивности

Частые ошибки и решения

Одна из распространенных проблем — неправильное понимание fr-единиц. Они распределяют только свободное пространство, а не общую ширину контейнера. Если нужно смешивать фиксированные и гибкие размеры, используйте комбинацию px и fr.

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