Основы CSS Grid

Если вы хоть раз сталкивались с задачей выстроить элементы на странице так, чтобы они идеально ложились в сложный макет, вы наверняка слышали про CSS Grid. Это не просто очередной инструмент в арсенале фронтенд-разработчика — это настоящая революция в верстке, которая позволяет создавать адаптивные и гибкие layouts без боли и костылей. Сегодня мы разберем CSS Grid с нуля: от базовых понятий до создания сложных макетов, которые будут работать на любом устройстве. Даже если вы только начинаете свой путь в CSS, эта статья поможет вам освоить сеточную верстку и почувствовать себя уверенно. Поехали!

Зачем нужен CSS Grid?

CSS Grid появился в 2017 году и быстро стал must-have навыком для разработчиков. До его прихода мы мучились с float’ами, боролись с Flexbox в сложных макетах или писали тонны JavaScript, чтобы добиться нужного результата. Grid изменил правила игры: теперь у нас есть двухмерная система, которая позволяет управлять строками и столбцами одновременно.

Почему это важно? Представьте: вам нужно сделать страницу с шапкой, боковой панелью, контентом и футером, причем все это должно адаптироваться под мобильные устройства. С Grid это делается в несколько строк кода. Гибкость, читаемость, поддержка во всех современных браузерах — вот что делает CSS Grid незаменимым. Эта статья для тех, кто знает основы CSS (селекторы, свойства вроде margin и padding), но еще не погружался в сетки. Давайте начнем!

Основы CSS Grid

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

Ключевые термины

• Grid Container: элемент с display: grid — родительская сетка.
• Grid Items: дочерние элементы контейнера.
• Grid Lines: линии, разделяющие сетку на строки и столбцы.
• Grid Tracks: сами строки и столбцы.
• Grid Cells: ячейки, образованные пересечением строк и столбцов.
• Grid Areas: именованные области для упрощения верстки.

Создание базовой сетки

Давайте начнем с простого. Вот как создать сетку:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

Этот код создает сетку с тремя столбцами по 100px и двумя строками по 50px. Дочерние элементы автоматически заполнят ячейки:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Результат: сетка 3x2, где элементы занимают ячейки слева направо и сверху вниз.

Расположение элементов

Можно явно указать позицию элемента, для этого нужно использовать grid-row и grid-column:

.item-pos {
	grid-row: 1;
	grid-column: 1;
	background-color: lightblue;
}

В данном случаи мы разместили последний элемент "6" в первой строке, в первом столбце.

.item {
  grid-row: 1 / 3; /* От первой до второй строки */
  grid-column: 2 / 4; /* От второго до четвертого столбца */
}

В данном случаи мы растянули элемент "5" на 2 строки и на 2 столбца.

Работа с промежутками (gaps)

Чтобы элементы не прилипали друг к другу, добавьте отступы с помощью gap:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 20px; /* Отступ между всеми элементами */
}

Есть возможность указать промежутки отдельно для строк и столбцов

.container {
  row-gap: 10px; /* Отступ между строками */
  column-gap: 15px; /* Отступ между столбцами */
}

Адаптивная верстка с CSS Grid

Grid становится по-настоящему мощным, когда нужно адаптировать макет под разные экраны. Вот несколько инструментов.

Относительные единицы (fr)

Единица fr (fraction) делит доступное пространство пропорционально:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 25% - 50% - 25% */
}

Auto-fit и auto-fill

Для динамического количества столбцов используйте repeat с auto-fit или auto-fill:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

auto-fit растянет столбцы, а auto-fill создаст пустые, если элементов не хватит. Добавьте медиа-запросы:

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* Один столбец на мобильных */
  }
}

Выравнивание и позиционирование

Grid дает полный контроль над выравниванием.

Выравнивание всей сетки

• justify-items: горизонтальное выравнивание элементов внутри ячеек (start, center, end).
• align-items: вертикальное выравнивание.
• justify-content и align-content: выравнивание всей сетки, если она меньше контейнера.

Пример:

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

Выравнивание отдельных элементов

Для конкретного элемента:

.item {
  justify-self: start;
  align-self: end;
}

Сравнение с Flexbox

Grid и Flexbox часто сравнивают, но они решают разные задачи:

• Flexbox: одномерная верстка (строки или столбцы).
• Grid: двумерная (строки и столбцы одновременно).

Пример: для горизонтального меню лучше Flexbox, а для сложного макета страницы — Grid.

Браузерная поддержка

CSS Grid поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) с 2017 года. Для старых IE есть полифиллы или резервные стили с display: block.

Заключение

CSS Grid — это не просто инструмент, а новый способ думать о верстке. Вы научились создавать сетки, управлять их адаптивностью и выравниванием, а также строить сложные layouts с минимальным кодом. Теперь ваша очередь: откройте редактор, попробуйте повторить примеры и создайте что-то свое.