Animated grid reflow (after Bramus)

<header>
  <h1>Animated grid reflow</h1>
  <p>
    Resize the window (or drag the grid's dashed edge). Each invisible cell
    reflows instantly; the numbered tile is anchored to its cell with
    <code>data-⚓️-fill</code> and only its position transitions (<code>data-⚓️-transition="glide"</code>).
    No JavaScript. After
    <a href="https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/">Bramus</a>.
  </p>
</header>

<div class="grid" data-⚓️-root>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">1</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">2</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">3</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">4</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">5</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">6</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">7</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">8</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">9</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">10</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">11</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">12</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">13</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">14</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">15</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">16</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">17</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">18</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">19</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">20</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">21</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">22</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">23</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">24</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">25</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">26</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">27</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">28</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">29</div></div>
  <div class="cell" data-⚓️-name="--tile" data-⚓️-scope-name="--tile"><div class="tile" data-⚓️-to="--tile" data-⚓️-fill data-⚓️-transition="glide">30</div></div>
</div>

/* Demo styling only; all positioning comes from data-⚓️-* attributes. */
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 250;
}

:root {
  --tile: 6rem;
  color-scheme: dark;
  background: oklch(17% 0.01 260);
  color: oklch(88% 0.01 260);
  font: 400 1rem/1.5 system-ui, sans-serif;
}

body {
  margin: 0;
  padding: clamp(1.25rem, 5vw, 3rem);
}

header {
  max-width: 60ch;
  margin-block-end: 2rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

header p {
  margin: 0;
  color: oklch(70% 0.01 260);
}

code {
  font: 0.9em ui-monospace, monospace;
  color: oklch(85% 0.08 200);
  white-space: nowrap;
}

a { color: oklch(80% 0.1 200); }

/* The grid: plain CSS grid, reflows instantly like any grid. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile));
  gap: 1rem;
  padding-inline-end: 1rem;
  border-inline-end: 2px dashed oklch(40% 0.02 260);
  resize: horizontal;
  overflow: hidden;
  min-width: calc(var(--tile) + 1rem);
}

/* Invisible structure: the grid item that actually occupies a track. */
.cell {
  aspect-ratio: 1;
  height: auto;
  --hue: calc(200 + sibling-index() * 5);
}

/* The visible tile, anchored to its cell. Size and glide come from the
   library (data-⚓️-fill sizes it from the cell; data-⚓️-transition="glide"
   animates it) — this rule is only looks. */
.tile {
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: oklch(30% 0.07 var(--hue));
  border: 1px solid oklch(45% 0.09 var(--hue));
  color: oklch(92% 0.04 var(--hue));
  font: 600 1.5rem/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}