Как анимировать CSS Grids без JavaScript
- 1 июня 2025
Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float
, flex
и position
. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
Да, grid-template-columns
и grid-template-rows
существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.
Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns
и grid-template-rows
вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents
. Просто работает.
Что это значит на практике
Давайте посмотрим на несколько примеров.
Это работает во всех браузерах, без оговорок. Главное условие: вы анимируете числовые значения. fr
, px
, %
— подойдут. auto
, min-content
— нет.
Интерактивные карточки и превью
Часто нужно, чтобы при наведении одна карточка становилась больше других — например, в слайдере, галерее или гриде товаров. Раньше это делалось через transform: scale
, и визуально всё вроде бы работало. Но если внутри карточки текст, кнопки, адаптивные блоки — масштаб всё портит: шрифты становятся размытыми, кнопки съезжают, верстка ломается. Анимированный Grid позволяет менять размер ячеек по-честному, без потерь в типографике и структуре. Элемент не масштабируется — он реально растёт в сетке, как положено.
Анимированная боковая панель
Классическая задача: при клике на кнопку левый сайдбар расширяется, а контентная часть сдвигается. Раньше — только width, либо через position: absolute и вручную пересчитанные отступы. Теперь можно задать grid-template-columns: 60px 1fr, а при раскрытии — 240px 1fr. Переход будет плавным, всё останется выровнено по сетке, и при этом не нужно пересобирать layout вручную. Особенно полезно, если внутри сайдбара — меню, аватар, фильтры: всё «раскроется» естественно.
Таблицы, гриды и редакторы
Когда пользователь, например, наводит на столбец таблицы или выбирает ячейку, хочется подсветить или выделить эту часть. Можно просто поменять фон — но гораздо выразительнее слегка увеличить колонку в ширину. Это делает интерфейс «живым», без резких скачков. А для визуальных редакторов, планировщиков, интерфейсов настройки — Grid с анимацией позволяет строить структуру, где всё двигается как в Figma, но средствами чистого CSS.
Почему это важно
Раньше, чтобы создать эффект изменения ширины колонок, приходилось изобретать обходные пути: либо использовать transform: scale
, либо пересчитывать width
через JavaScript, либо подменять layout на Flex и работать с flex-grow
. Выглядело это не очень:
Все эти способы создавали визуальную иллюзию, но не меняли реальную структуру макета. Например, если вы меняете размер элемента, его потом трудно выровнять по сетке, определить реальную ширину, он может «вылезать» за пределы контейнера. Грид решает это честно: вы меняете именно шаблон сетки, а браузер всё перерасчитывает с учётом реального контекста.
То, чего не хватало всё это время — это плавности. Мы давно привыкли к transition
на opacity
, transform
, color
, но когда речь шла о макете — всё было либо резко, либо через JS. Теперь вы можете спокойно поменять компоновку интерфейса, и пользователь увидит, как сетка перестраивается на глазах, без рывков. Это особенно важно для интерактивных компонентов: карточек, панелей, модулей, где есть ощущение вложенности и масштаба. Всё движется естественно — и именно макет, а не просто декорации.
Кроме того, это упрощает архитектуру. Больше не нужно оборачивать каждый элемент в отдельный блок с overflow: hidden
, придумывать псевдоэлементы, чтобы имитировать переход между колонками. Grid делает это сам. Это означает меньше кода, меньше зависимостей, меньше нестабильных решений, и, самое главное — меньше скрытой логики. Вы описываете, какой должен быть макет в каждом состоянии, а CSS сам заботится о переходе между ними.
Наконец, это меняет отношение к самому CSS. Grid анимации делают возможным векторный интерфейс — когда структура интерфейса не зафиксирована, а может гибко и плавно меняться, реагируя на взаимодействие пользователя. При этом это не скрипт, не canvas, не WebGL. Это просто CSS. В двух состояниях. И вы сразу видите, что произойдёт: ни сюрпризов, ни фреймворков, ни «магии».
Grid был задуман как инструмент для разметки. Теперь он стал и выразительным инструментом для динамической разметки. Всё, что раньше делали через JS и 12 вложенных div’ов, теперь можно сделать в три строки CSS — красиво, надёжно, понятно.
И главное — стабильно. 2025-й год стал точкой, когда CSS Grid Animation больше не эксперимент. Это стандарт.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

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 от лучших к худшим
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