🌐 Не flex единым! Гриды — это сила!

Многие боятся Grid’ов. Особенно это касается молодых разработчиков, которые привыкли верстать на Flex’ах, или, наоборот, старых разработчиков, которые знают только Flex’ы, а Grid’ов боятся.

На самом деле, Grid’ов бояться - dо Frontend не ходить, как говорит известная пословица. Используйте Grid’ы — они не такие страшные. Верстать ими удобно, править ими всё удобно.

Почему боятся Grid’ы?

1. Непривычный синтаксис

Многие привыкли к Flexbox и считают, что он решает все задачи. Но на самом деле Grid даёт гораздо больше возможностей.

/* Flexbox - одно измерение */
.container {
  display: flex;
  flex-direction: row;
}
 
/* Grid - два измерения */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
}

2. Стереотипы

Существует мнение, что Grid — это что-то сложное и нужно только для больших проектов. На самом деле Grid упрощает даже простую верстку.

3. Боязнь перемен

Привыкнуть к новому всегда страшно. Но кто не рискует, тот не пьёт шампанского!

Преимущества Grid перед Flex

1. Двухмерная верстка

Flex работает в одном направлении (строка или колонка), а Grid работает одновременно по двум осям.

/* Сложно сделать это на Flex */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
 
/* Элементы автоматически выстраиваются в сетку */
.item {
  /* Никаких дополнительных стилей не нужно */
}

2. Управление позиционированием

С Grid можно легко управлять позицией элементов:

.item:nth-child(2) {
  grid-column: 1 / 3; /* Занимает первые две колонки */
  grid-row: 2;        /* Во второй строке */
}

3. Адаптивность без медиа-запросов

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

Одна строка кода заменяет несколько медиа-запросов!

Когда использовать Grid, а когда Flex?

Используй Grid, когда:

✅ Нужна двухмерная раскладка (строки и колонки)
✅ Создаешь галереи, таблицы, формы
✅ Нужно точное позиционирование элементов
✅ Верстаешь макеты с фиксированными областями

Используй Flex, когда:

✅ Нужна одномерная раскладка (только строки ИЛИ колонки)
✅ Создаешь навигационные меню
✅ Выравниваешь элементы по одной оси
✅ Нужна гибкость размеров элементов

Простые примеры использования Grid

1. Карточки товаров

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

2. Форма обратной связи

.form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}
 
.form label {
  grid-column: 1;
}
 
.form input,
.form textarea {
  grid-column: 2;
}

3. Сложный макет

.layout {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Личный опыт: как Grid изменил мою верстку

Раньше я тоже боялся Grid. Верстал всё на Flex и думал, что это верх мастерства. Но однажды мне нужно было сверстать сложную галерею с разными размерами карточек.

На Flex ушло 3 дня и куча костылей. Решил попробовать Grid — сделал за 30 минут, и код был чище в 10 раз.

С тех пор я:

1. Использую Grid для сложных раскладок
2. Оставляю Flex для простых компонентов
3. Не боюсь экспериментировать с новыми свойствами

Результат: быстрее верстаю, меньше багов, проще поддерживать код.

Вывод: Grid — это не страшно

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

Grid — это как швейцарский армейский нож для верстки. Универсален и очень удобен.

В следующий раз, когда будете верстать сложную раскладку, вспомните: вы можете сэкономить часы работы, просто использовав Grid. Ваш код и ваши коллеги скажут вам спасибо.