Когда использовать флексы, а когда гриды
- 25 февраля 2021
Сеткой или раскладкой обычно называют взаимное расположение крупных визуальных блоков на странице.
Можно мысленно разделить макет на не пересекающиеся друг с другом прямоугольники. Сначала вы получите самые крупные области, потом эти крупные области можно разделить на области поменьше, и так далее до мельчайших прямоугольников, которые выделяют отдельные слова или элементы страницы. Вся страница будет выглядеть как набор вложенных в друг друга прямоугольников, от самых крупных до самых мелких.

История
Не все верстальщики учились строить сетки веб-интерфейсов сразу на гридах. Некоторые начали верстать тогда, когда специальных инструментов для построения сеток ещё не было и приходилось использовать таблицы или флоаты, хотя их придумали для изъятия элементов из потока. Но когда в 2006 году появилась технология, предназначенная именно для построения сеток, — CSS Flex Layout (флексы) — таблицы и флоаты с этой целью постепенно перестали применять.
На тот момент выбор верстальщиков в пользу флексов был очевиден. Но с появлением в 2011 году ещё одного инструмента — CSS Grid Layout (гридов) — развернулся спор, который до сих пор продолжается. Верстальщики разделились на две категории: одни — за флексы, вторые — за гриды. И те, и другие пытаются обосновать свою позицию и убедить коллег в том, что правы именно они.
Сходства и различия
Масло в огонь подливает то, что гридами и флексами можно решать одни и те же задачи. Например, сделать стики-футер (когда подвал сайта прилипает к нижней части экрана), случайное количество карточек товара или каркас всей страницы.
Одно из преимуществ гридов — зазоры между линиями (gap), но и они перешли уже в общую спецификацию. Теперь gap можно использовать во флексах, что ещё больше добавляет путаницу в выборе CSS-свойства.
Но тем не менее между флексами и гридами есть значимые различия.
Флексы — одномерные. Это значит, что управлять расположением в рядах нельзя.

Гриды же двухмерные. То есть можно передвигать элементы между строками и рядами.

Например, если верстальщик хочет расположить логотип, навигацию и номер телефона в шапке, то проще будет использовать флексы. Именно проще: гриды тоже могут решить эту задачу, но флексы справятся с ней гораздо быстрее.
Если взять целый сайт, с шапкой, контентной частью и подвалом, то здесь речь будет идти уже о двухмерности интерфейса. И хотя флексами сайт тоже можно сверстать, гриды сделают это эффективнее и надёжнее.
Таким образом, гриды в основном используются для построения сетки всего интерфейса. Флексы же — для расположения элементов внутри сетки.
👉 Гриды — для каркаса сайта, флексы — для контента.
Мы рекомендуем придерживаться именно такого порядка. А по мере работы с этими двумя свойствами вы и сами начнёте чувствовать, в каких случаях та или иная технология подходит больше.
Чтобы быстрее это понять, можно потренироваться на навыках «Построение сеток на флексах» и «Построение сеток на гридах». Навыки покажут все различия между способами построения сеток, помогут отработать оба и уложить это в голове.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как анимировать CSS Grids без JavaScript
Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float
, flex
и position
. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
Да, grid-template-columns
и grid-template-rows
существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.
Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns
и grid-template-rows
вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents
. Просто работает.
- 1 июня 2025

Все единицы измерения в CSS от лучших к худшим
CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки.
Абсолютные:
px
— пикселиcm
— сантиметрыmm
— миллиметрыin
— дюймыpt
— типографские пунктыpc
— пика
Относительные:
z%
— процент от родителяem
— от размера шрифта родителяrem
— от размера шрифта корняvw
— 1% от ширины вьюпортаvh
— 1% от высоты вьюпортаvmin
/vmax
— минимальное/максимальное из vw и vhfr
— доля пространства в грид-сеткеch
— ширина символа «0»ex
— высота строчной буквы «x»
Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.
- 30 мая 2025

Как размыть фон под элементом с помощью backrop-filter
В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter
. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.
То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter
.
Пример минимального кода:
<div class="glass-panel">Контент</div>
.glass-panel {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.3);
}
Чтобы это работало, у элемента должен быть фон с прозрачностью (например, rgba или hsla), иначе фильтр не виден. И да, backdrop-filter
визуально различим только если элемент реально перекрывает что-то.
- 5 мая 2025

Справочник по новым математическим функциям CSS
За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.
Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.
Статья дополняется.
- 28 апреля 2025

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться
Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll
, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.
Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.
Внимание! Все примеры в этой статье работают только в Chrome 116+.
- 27 апреля 2025

Анимация по любой траектории с offset-path
У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.
В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.
- 18 апреля 2025

Автоматическая тёмная тема: новая CSS-функция light-dark()
CSS-функция light-dark()
облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark)
и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color
, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.
С light-dark()
всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white)
— в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media
. Просто одно свойство и два значения — читаемо, логично, компактно.
- 23 апреля 2024

Псевдокласс :link
Псевдокласс :link
в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.
Пример использования псевдокласса :link
для стилизации непосещенных ссылок:
a:link {
color: #007bff;
text-decoration: none;
}
В данном примере для всех непосещенных ссылок устанавливается синий цвет (#007bff
) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных (:visited
) ссылок.
При работе с :link
, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited
для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover
и :active
, чтобы обеспечить интерактивный и отзывчивый интерфейс.
Пример полного набора стилей для ссылок:
a:link {
color: #007bff;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:active {
color: #ff0000;
}
В этом примере задаются различные стили для всех возможных состояний ссылок: :link
для непосещённых, :visited
для посещённых, :hover
при наведении курсора и :active
в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.
- 4 апреля 2024

Селектор потомков (пробел)
Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.
Пример использования селектора потомков:
article p {
color: #333;
line-height: 1.6;
}
В данном примере все абзацы (<p>
), которые находятся внутри элемента <article>
, будут окрашены в темно-серый цвет и получат межстрочный интервал в полтора размера шрифта. Селектор потомков позволяет легко управлять стилем конкретных элементов, сохраняя при этом общую структуру и читаемость кода.
Селектор потомков особенно полезен в следующих случаях:
- Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
- Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
- Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.
Применение селектора потомков упрощает создание модульной и легко поддерживаемой структуры стилей, позволяя разработчикам более точно и гибко управлять внешним видом веб-страницы.
Однако, важно соблюдать баланс и избегать слишком глубокой вложенности селекторов, так как это может усложнить поддержку и оптимизацию кода. Рекомендуется использовать селектор потомков с умом, ориентируясь на поддержание чистоты и простоты структуры CSS.
- 4 апреля 2024

Псевдокласс :focus
Псевдокласс :focus
в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus
позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.
Пример использования :focus
:
input:focus {
border: 2px solid blue;
background-color: lightblue;
}
В этом примере для всех текстовых полей (input
) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.
Псевдокласс :focus
особенно важен для:
- Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
- Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
- Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.
Применение :focus
в сочетании с другими псевдоклассами, такими как :hover
и :active
, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.
Однако, важно помнить, что стилизация элементов при помощи :focus
должна быть достаточно заметной, чтобы пользователь мог легко идентифицировать фокусируемый элемент, но при этом не должна быть слишком навязчивой, чтобы не отвлекать от общего восприятия интерфейса.
- 4 апреля 2024