Правильное расположение элементов на веб-странице — это ежедневная задача любого фронтенд-разработчика. Ещё несколько лет назад эта работа выполнялась с большим трудом при помощи таких приёмов, как float и position, поскольку изначально они создавались вовсе не для вёрстки, а для совершенно других целей. Сегодня же CSS предоставляет нам два мощных и специализированных инструмента раскладки: Flexbox и Grid. Обе эти технологии лежат в основе создания современных интерфейсов, и их глубокое понимание необходимо каждому разработчику.
Многие начинающие специалисты теряются при выборе между Flexbox и Grid. На самом деле эти технологии не конкурируют друг с другом, а наоборот, прекрасно дополняют друг друга. Стоит лишь понять их принципиальное различие, и вы сможете принимать верное решение в каждой конкретной ситуации. В этой статье мы подробно рассмотрим основы обеих систем, их взаимные отличия и то, как они работают вместе в реальных проектах.
Flexbox и Grid: в чём ключевое различие?
Самое важное различие можно выразить одной фразой: Flexbox — это одномерная система раскладки, которая выстраивает элементы только вдоль одной оси — либо в ряд (по горизонтали), либо в колонку (по вертикали). Grid же является двумерной системой и позволяет управлять элементами одновременно и по строкам, и по столбцам. То есть с помощью Grid вы создаёте полноценную табличную структуру, контролируя расположение в обоих направлениях.
Как это различие проявляется на практике? Если вам нужно выстроить ссылки в навигационном меню в один ряд, расположить кнопки рядом друг с другом или отцентрировать внутренние элементы карточки, то Flexbox будет наилучшим выбором. Если же вы хотите организовать общую структуру всей страницы — такие блоки, как шапка, боковая панель, основной контент и подвал — как единое целое, то здесь Grid предоставит гораздо более удобный и логичный подход.
Основы Flexbox
Чтобы начать работу с Flexbox, достаточно задать родительскому элементу (контейнеру) свойство display: flex. После этого все его прямые потомки превращаются во флекс-элементы, и вы можете управлять ими при помощи различных свойств. Наиболее часто используемые из них следующие: justify-content управляет распределением вдоль главной оси, align-items — вдоль поперечной оси, а gap задаёт расстояние между элементами.
.container {
display: flex;
justify-content: space-between; /* распределение по горизонтали */
align-items: center; /* центрирование по вертикали */
gap: 16px; /* отступ между элементами */
}
.item {
flex: 1; /* каждый элемент занимает равное место */
}В приведённом примере justify-content: space-between равномерно распределяет элементы по ширине контейнера, прижимая первый и последний к краям. Свойство align-items: center выравнивает их по вертикальному центру. Значение flex: 1 предписывает каждому потомку занять равную долю свободного пространства, что очень удобно при создании гибких колонок. Главная сила Flexbox заключается в том, что он автоматически подстраивается под размеры содержимого.
Основы Grid
Для работы с Grid контейнеру задаётся display: grid, после чего через grid-template-columns определяется структура колонок. Здесь особое значение имеет единица fr (fraction — доля). Она распределяет доступное свободное пространство в заданных пропорциях: например, 1fr 2fr означает, что первая колонка будет вдвое уже второй. Свойство gap, как и в Flexbox, управляет расстоянием между строками и столбцами.
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* три колонки */
grid-template-rows: auto;
gap: 20px;
}
/* grid-area для сложной структуры */
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }Во втором примере при помощи свойства grid-template-areas мы фактически нарисовали визуальную карту страницы в текстовом виде. Такой подход делает код чрезвычайно читаемым, потому что вы прямо внутри CSS видите, какой элемент где будет расположен. Каждая именованная область привязывается к своему элементу через свойство grid-area. Именно в создании подобных сложных двумерных структур Grid значительно превосходит Flexbox.
Совместное использование обеих технологий
Наилучшего результата удаётся достичь, когда Flexbox и Grid используются вместе. Как правило, Grid применяют для организации общего каркаса страницы — крупных блоков, — а Flexbox для расположения мелких элементов внутри каждого блока, например изображения, текста и кнопки внутри карточки. Такой подход логично разделяет вёрстку на «макро»- и «микро»-уровни.
/* Каркас страницы — Grid */
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Внутренность карточки — Flexbox */
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
}В этом примере набор карточек выстроен в три колонки при помощи Grid, а элементы внутри каждой карточки расположены вертикально при помощи Flexbox. Именно этот приём применяется на большинстве современных веб-сайтов, и он позволяет держать код в аккуратном, легко расширяемом состоянии. Разделение ответственности между двумя системами делает разработку предсказуемой.
Адаптивная вёрстка и отличие от старых методов
Адаптивный дизайн — подстройка под разные размеры экранов — реализуется очень просто в обеих технологиях. Для Grid волшебная комбинация вида repeat(auto-fit, minmax(250px, 1fr)) автоматически меняет количество колонок в зависимости от ширины экрана, не требуя ни одного медиа-запроса. Для Flexbox же свойство flex-wrap: wrap переносит элементы на новую строку, когда им не хватает места.
При сравнении со старым методом float преимущество этих технологий становится очевидным. Float изначально был создан для обтекания изображений текстом, и его использование для вёрстки порождало множество проблем — например, схлопывание высоты контейнера (требовался clearfix) и практически полную невозможность вертикального центрирования. Flexbox и Grid же созданы именно для раскладки, поэтому вертикальное центрирование, равные колонки и гибкие структуры решаются с их помощью буквально в несколько строк кода. Подводя итог, в современной фронтенд-разработке float больше не используется как инструмент вёрстки, и его место полностью заняли Flexbox и Grid.