CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions.
Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты
anchor() меняются, а transition плавно двигает карточку к новому месту.Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026.
Firefox уже понимает anchors, но изменение координат из
anchor() пока не анимирует — карточки просто прыгают. Но зато в Safari 26 всё отлично! Я удивлён.Так-то забавно выходит.
Ах, да.
Ссылка:
https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
Сразу на демо: https://codepen.io/editor/bramus/pen/01a07dd4-4d23-7e7b-9f41-3e0aa126751f
#css #grid