Animated Grid Layout Experiments (CSS-only)

CSS grid layouts using named areas are great for defining layouts, especially when driven using decoupled custom properties to drive state, responsiveness, etc.

You cannot natively animate between property-driven grid states, however: grid-template-areas does not support transitions, and interpolation of grid-template-columns/grid-template-rows only works with a constant number of values.

There's really no need to animate the layouts, but it's a neat technical challenge.

Demos

• Plain grid layout (no animations)

  Basic setup: good enough for almost any application, but not a showy demo.

• Anchors to duplicated content

  Animations work, but you must either know or match the cell sizes.

• Micromanaged anchor layout

  Grid implemented fully in anchors, no grid-areas.

These only work in browsers which support Container Style() Queries and Anchor Positioning.