🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
#фишка дня
CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions.
Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты anchor() меняются, а transition плавно двигает карточку к новому месту.
Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026.
Firefox уже понимает anchors, но изменение координат из anchor() пока не анимирует — карточки просто прыгают. Но зато в Safari 26 всё отлично! Я удивлён.
Так-то забавно выходит.
Ах, да.
Ссылка:
Ссылка скрыта
Сразу на демо: Ссылка скрыта
#css #grid