TGViewer
Веб-страница Веб-страница @tproger_web · 22.5K subscribers
Post #6524 1.03K
Как анимировать перестройку CSS Grid без JavaScript

В разборе приёма содержимое каждой плитки привязывают к её ячейке через CSS Anchor Positioning. Перемещение при изменении ширины контейнера анимирует обычный переход свойства inset.

Ячейка Grid виртуальна, поэтому якорем служит дополнительная обёртка. Она получает anchor-name, а anchor-scope позволяет повторять это имя в других ячейках без конфликтов. Блоку с контентом задают абсолютное позиционирование и фиксированные размеры, чтобы он не растягивался при движении.

Анимацию можно прервать: плитки сразу направятся к новым позициям, не дожидаясь предыдущего перехода. JavaScript не нужен. В Firefox приём сейчас не анимируется, поэтому для интерфейса во всех браузерах понадобится запасной вариант.
  • 🔥 3
More from @tproger_web
  1. Sep 20, 2026Как проверять CSS после рефакторинга с ИИ Пять ИИ-инструментов получили HTML и CSS карточк…
  2. Sep 20, 2026Как защитить списание кредитов в Django от гонки запросов У аккаунта один кредит. Два запр…
  3. Sep 19, 2026Как защитить API от повторной оплаты Клиент не получил ответ и повторил POST. Сервер мог у…
  4. Sep 19, 2026Как заблокировать отрисовку JavaScript, не останавливая HTML-парсер Когда компоненту нужно…
  5. Sep 19, 2026Почему box-shadow не заменяет outline для фокуса CSS-тень даёт больше свободы в оформлении…
  6. Sep 18, 2026Курсорная пагинация для API: когда она надёжнее OFFSET OFFSET удобен, пока выборка невелик…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →