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 больше не эксперимент. Это стандарт.