Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 20 сентября 2026 г.
Как анимировать перестройку CSS Grid без JavaScript — 20 сентября 2026 г. в 05:06:39.657
Как анимировать перестройку CSS Grid без JavaScript В разборе приёма содержимое каждой плитки привязывают к её ячейке через CSS Anchor Positioning. Перемещение при изменении ширины контейнера анимирует обычный переход свойства inset. Ячейка Grid виртуальна, поэтому якорем служит дополнительная обёртка. Она получает anchor-name, а anchor-scope позволяет повторять это имя в других ячейках без конфликтов. Блоку с контентом задают абсолютное позиционирование и фиксированные размеры, чтобы он не растягивался при движении. Анимацию можно прервать: плитки сразу направятся к новым позициям, не дожидаясь предыдущего перехода. JavaScript не нужен. В Firefox приём сейчас не анимируется, поэтому для интерфейса во всех браузерах понадобится запасной вариант.