Anchor positioning

Tether an element to another one, wherever it ends up

Your browser does not support CSS anchor positioning, so the tiles below sit in their cells as plain grid content and jump instead of gliding.

Animating a grid layout

A grid cannot transition its items from one track to another. Anchor positioning can: every cell is an anchor, and its tile is absolutely positioned onto it with inset: anchor(inside). When the grid reflows, the resolved insets change, and a plain transition carries the tile to its new cell. Drag the resize handle of the dashed box, or switch the tile size (technique by Bramus).

<div class="grid">
  <div class="cell"><div class="content">1</div></div>
  <div class="cell"><div class="content">2</div></div>
  …
</div>

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 6rem);
    gap: 1rem;
}

.cell {
    aspect-ratio: 1;
    /* every cell reuses --a; the scope keeps each one to its own subtree */
    anchor-scope: --a;
    anchor-name: --a;
}

.content {
    position: absolute;
    position-anchor: --a;
    inset: anchor(inside);
    /* explicit size, or the tile stretches while it travels */
    width: 6rem;
    height: 6rem;
    transition: inset 0.3s ease;
}

Gotchas

• Anchor names are global by default. Without anchor-scope, every tile would find the last --a in the document and pile up there.
• The animation is interruptible: resize mid-flight and the tiles change course towards their new cells, something View Transitions cannot do.
• Firefox positions the tiles correctly but does not animate them. It keeps anchor() as the computed value instead of resolving it to pixels, so there is nothing to interpolate.
• The tooltip on the samples page uses anchor positioning too, with position-area and position-try-fallbacks.