От Flexbox к Grid
В прошлом уроке использовали Flexbox для раскладки элементов в ряд или столбец. Flexbox отлично работает для одномерных раскладок: навигация, футер, карточки в ряд. Но есть задачи посложнее. Посмотрите на секцию «Контакты» ADC. Видите сетку из четырёх блоков? Верхний ряд: «По вопросам поступления» слева, «По общим вопросам» справа. Нижний ряд: «Дополнительное образование» слева, «Адрес» справа. Чёткая сетка два столбца, два ряда.
Flexbox может это сделать, но сложно. Нужно создавать вложенные контейнеры, считать ширины, настраивать переносы. Для таких двумерных раскладок существует Grid Layout. CSS Grid, сеточная раскладка. Вы рисуете сетку из строк и столбцов, размещаете элементы в ячейки. Как таблица, но намного мощнее и гибче.
Grid — это как шахматная доска. Доска разделена на клетки. Размещаете фигуры на нужные клетки. Одна фигура может занять одну клетку, другая несколько. Grid позволяет делать то же самое с элементами страницы.
Создание простой сетки
У нас уже есть разметка для секции контактов:
<section class="contacts-section">
<h2>Контакты</h2>
<p class="contacts-intro">
По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
</p>
<div class="contacts-grid">
<div class="contact-column">
<p class="contact-label">По вопросам поступления</p>
<p class="contact-phone">+7 499 444-02-84</p>
<p class="contact-email">design@hse.ru</p>
</div>
<div class="contact-column">
<p class="contact-label">По общим вопросам</p>
<p class="contact-phone">+7 495 621-87-11</p>
</div>
<div class="contact-column">
<p class="contact-label">Дополнительное образование</p>
<p class="contact-phone">dop-design@hse.ru</p>
</div>
<div class="contact-column">
<p class="contact-label">Адрес</p>
<p class="contact-phone">129110, г. Москва, ул. Пантелеевская, д. 53.</p>
</div>
</div>
</section>Четыре блока с контактной информацией. Без стилей они встанут друг под другом. Примените Grid:
.contacts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 54px 234px;
}display: grid делает контейнер grid-контейнером. grid-template-columns: 1fr 1fr создаёт два столбца равной ширины. 1fr — это одна доля свободного пространства. Два столбца по 1fr делят ширину пополам. gap: 54px 234px добавляет отступы между ячейками.
Сохраните. Обновите страницу. Видите? Четыре блока выстроились в сетку два на два. Первые два в верхнем ряду, следующие два в нижнем. Grid сам распределил элементы по ячейкам.
Изменение количества столбцов
Можете задать больше столбцов. Например, три:
.contacts-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 54px 234px;
}Теперь три столбца. Четыре элемента распределятся: три в первом ряду, один во втором. Для дизайна ADC нужны два столбца, вернитесь к 1fr 1fr.
Разные пропорции столбцов
Доли 1fr могут быть разными. Если хотите левый столбец шире правого:
.contacts-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 54px 234px;
}Левый столбец занимает две доли, правый одну. Левый в два раза шире. Для равных столбцов используйте одинаковые доли.
Фиксированная ширина столбцов
Можете задать ширину в пикселях:
.contacts-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 54px 234px;
}Левый столбец фиксированный 300 пикселей, правый растягивается на оставшееся пространство. Это полезно для сайдбаров или боковых меню.
Когда использовать Grid и Flexbox
Grid подходит для двумерных раскладок: сетки карточек, сложные макеты с шапкой, сайдбаром, контентом и футером. Flexbox для одномерных раскладок: навигация, строки кнопок, простые ряды элементов. Вместе они покрывают все задачи раскладки.
Используйте Grid для создания общей структуры страницы, а Flexbox для выравнивания элементов внутри отдельных блоков.
Какое свойство создаёт grid-контейнер?
Что означает значение 1fr в grid-template-columns?
Выберите корректные способы задать два столбца в Grid:
Полное руководство по CSS Grid — CSS-Tricks