Как создавать адаптивные сетки
- 25 января 2023
Адаптивная вёрстка позволяет создать сайт, способный динамично меняться в зависимости от устройства, на котором его открывают, и размера его экрана. С помощью адаптивных сеток возможно сделать дизайн, который легко перестраивается при необходимости.
Один из самых удобных методов — создание адаптивных сеток с помощью медиавыражений в CSS.
👉🏼 Медиавыражения — это способ, который помогает определить в стилях характеристики браузера или предпочтения пользователя, а затем применить стили или запустить другой код на основе этих параметров.
То есть на экране смартфона сайт будет выглядеть иначе, чем на экране ноутбука, чтобы пользователю было комфортно взаимодействовать с интерфейсом. Медиавыражения меняют ширину экрана, ориентацию устройства, настройки операционной системы и многое другое.
Любое медиавыражение начинается директивы @media
, её указание необходимо, чтобы выражение заработало.
В скобках указывают характеристики — условия, при которых медиавыражение меняет вид сайта соответственно указанным свойствам.
@media (min-width: 768px){
.user-list {
/* стили для разрешения от 768px */
}
}
Создание адаптивной сетки по шагам
Шаг 1. Получаем заказ, изучаем макет от дизайнера
В макете предусмотрены нужные размеры и особенности дизайна на разных устройствах. Оптимально начинать вёрстку с дизайна для мобильных устройств. Затем с помощью медиавыражений несложно сделать другие версии сайта.

Шаг 2. Размечаем мобильную версию сайта
Создаём разметку сайта в файле HTML, учитывая смысловое предназначение каждого блока
Как сверстать макет. Пошаговый план
Шаг 3. Прописываем стили и создаём сетки
Указываем стили всем элементам в CSS. Верстаем сетки, используя инструменты Grid или Flexbox. В зависимости от вида сетки выбирается одно или другое свойство.
Grid — это технология, позволяющая создавать сетки, где каждый элемент может занимать определенное количество ячеек и строк.

В свою очередь Flexbox — это способ размещения элементов в одну в строку или колонку, с возможностью адаптации их размера и порядка в зависимости от дизайна сайта.

Например, для создания сетки навигации для мобильного устройства используем флексы, выстраиваем элементы сверху вниз:
.navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 710px;
margin: 0 auto;
}
Шаг 4. Добавляем вьюпорт
Указываем в разметке в <head>
вьюпорт, который будет включать медиазапросы, чтобы на каждом устройстве отображалась подходящая версия сайта:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Атрибут width=device-width
означает, что размер сайта на устройстве равен размеру в пикселях, который указаны в CSS.
Атрибут initial-scale
говорит о том, что сайт на устройстве будет выглядеть именно так, как описано в CSS, один к одному.
Шаг 5. Указываем стили для планшетной версии сайта
Сайт полностью свёрстан для мобильного устройства, приступаем к созданию размеров для планшета. Для этого указываем медиавыражения, которые будут перестраивать вёрстку под размер экрана.
Когда экран устройства становится шире, мобильная вертикальная сетка перестраивается в горизонтальную, элементы распределяются по пространству экрана.
Пример сетки на разных устройствах:

Чтобы сетка адаптировалась к ширине экрана, пишем в характеристике условия, при выполнении которых сетка будет меняться. Например, когда экран устройства будет шириной от 780px
, сетка перестроится:
@media (min-width: 780px){
.navigation {
display: flex;
flex-direction: row;
margin: 0 auto;
}
}
@media (min-width: 780px){
.navigation_item {
width: 390px;
margin: 0 auto;
}
}
Шаг 6. Приступаем к десктопной версии сайта
Здесь сетки могут ещё больше видоизменяться, в каких-то ситуациях лучше ввести гриды вместо флексов:
@media (min-width: 1200px) {
.navigation {
max-width: 980px;
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Полезные и часто применяемые характеристики медиавыражений
min-width
и max-width
— CSS-правила начинают работать от указанного значения и выше, включая значение. Когда пользователь открывает сайт на устройстве, ширина которого начинается от min-width
, вёрстка перестраивается, блоки размещаются соответственно подходящему дизайну.
@media (min-width: 1200px){
.navigation {
display: flex;
justify-content: space-between;
width: 540px;
margin: 0 auto;
}
}
@media (max-width: 1200px){
.nav-list {
width: 60px;
}
}
min-height
и max-height
— применяют, когда адаптируют плотность интерфейса для экранов разной высоты — например, для интерфейса электронной почты.
@media (min-height: 1024px){
.user-list {
}
}
@media (max-height: 1024px){
.navigation {
}
}
resolution
— характеристика, которая говорит о плотности экрана. Её применяют с приставкой min-
, чтобы указать на экраны с плотностью выше указанной.
@media (min-resolution: 2dppx) {
.navigation {
background-image: url("images/background@2x.png");
}
}
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как работает :not() в CSS — исключаем элементы из стилей правильно
Доступно в Baseline в статусе «Widely Available» с 2023-07-21
Псевдокласс :not()
позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.
- 20 июля 2025

Выбор цветов в CSS через hsl() и hsla()
CSS-функции hsl()
и hsla()
позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.
- 18 июля 2025

Как перекрыть один элемент другим. CSS-свойство z-index
Свойство z-index
в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index
, тем ближе к пользователю расположен элемент.
- 16 июля 2025

Единица измерения cap в CSS
С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap
. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em
или rem
, но и относительно визуальной высоты заглавных букв.
Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.
- 8 июля 2025

10 свойств в CSS о которых вы, вероятно, не знали
Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>
, <color>
, <font-size>
и может быть, <flex>
. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.
- 22 июня 2025

Округление в CSS с функцией round()
Функция round()
появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc()
или JavaScript.
- 22 июня 2025

focus-visible
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab
.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible
. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
- 21 июня 2025

CSS font-palette: управление цветами шрифтов
Свойство font-palette
позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color
уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)
Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.
- 18 июня 2025

Как анимировать 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