Что такое CSS Grid Layout и для чего он применяется?

Что такое CSS Grid Layout?

CSS Grid Layout — это модуль CSS, который предоставляет систему двумерной раскладки, позволяющую размещать элементы как по горизонтали (столбцы), так и по вертикали (строки) одновременно. В отличие от Flexbox, который работает в одном измерении, Grid идеально подходит для создания сложных макетов, где нужно контролировать и строки, и столбцы. Он применяется для построения каркасов страниц, панелей, галерей и любых интерфейсов, где требуется точное позиционирование элементов в сетке.

Основные концепции

Grid состоит из контейнера (родительского элемента) и его дочерних элементов (grid items). Контейнер задает сетку с помощью свойств display: grid, а затем определяются столбцы и строки через grid-template-columns и grid-template-rows. Можно использовать единицы измерения, такие как пиксели, проценты, fr (доли свободного пространства) и функции вроде repeat() и minmax().

Пример простой сетки:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
  gap: 10px;
}
.item {
  background: lightblue;
  padding: 20px;
}

Здесь создается три столбца с пропорциями 1:2:1 и две строки: первая автоматическая, вторая фиксированная 100px. Свойство gap задает отступы между ячейками.

Управление размещением элементов

Элементы можно размещать явно, указывая номера линий сетки или используя именованные области. Например:

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}
.item2 {
  grid-column: 3;
  grid-row: 1 / 3;
}

Это позволяет создавать сложные макеты без дополнительных оберток. Также доступны свойства grid-area и grid-template-areas для наглядного описания структуры.

Адаптивность и применение

Grid отлично подходит для адаптивной верстки: можно менять количество столбцов и строк с помощью медиазапросов, а также использовать auto-fit и auto-fill для автоматического подбора количества колонок. Это упрощает создание отзывчивых интерфейсов без сложных вычислений.

Пример адаптивной сетки:

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

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

Вывод

CSS Grid Layout — незаменимый инструмент для создания сложных и адаптивных макетов. Его стоит применять, когда требуется двумерная раскладка с точным контролем над строками и столбцами, например, для каркасов сайтов, панелей управления или галерей. Grid упрощает код и делает верстку более предсказуемой и поддерживаемой.