Animating CSS Grid Layouts with CSS Anchor Positioning

~

~

# The Technique

The trick here is to use CSS Anchor Positioning and anchor the cell’s content to the cell itself. Since you can’t anchor content directly onto a grid’s cell — grid cells are virtual concepts — you need to inject an extra wrapper div that is set to take up the cell’s available space and act as the anchor. Regular CSS transitions are then responsible for nicely animating things as they shift around.

<div class="grid">
	<div class="cell">
		<div class="content">CONTENT</div>
	</div>
	<div class="cell">
		<div class="content">CONTENT</div>
	</div>
	…
</div>

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

.cell {
	height: auto;
	aspect-ratio: 1;
	
	anchor-scope: --a;
	anchor-name: --a;
}

.content {
	position: absolute;
	position-anchor: --a;
	inset: anchor(inside);
	width: 6rem;
	height: 6rem;

	transition: inset 0.2s ease;
}

There are four key details that make this whole setup click:

1. Because anchor names are by default global, they need to be scoped to a specific cell’s subtree. anchor-scope: --a; takes care of that, allowing every .cell to reuse the --a identifier without clashing with any other cells.

2. The aspect-ratio: 1; on the .cells ensures they take up as much height as they are wide.

3. The transition declaration ensures the inset nicely transitions from one value to the other.

4. The .content divs are given explicit dimensions (width and height). Without it, the .content divs would stretch and squeeze as they interpolate across the resizing grid.

Unlike with View Transitions, this technique requires absolutely no JavaScript and the animations are perfectly interruptible. If you rapidly resize the viewport back and forth, the tiles don’t get queued up waiting for animation frames or transition promises to finish—they immediately redirect mid-flight toward their newly calculated positions.

~

# Demo

Here is the demo I built to demonstrate this behavior:

See the Pen
Animated Reorganizing Grid with Anchor Positioning (No View Transitions!) by Bramus (@bramus)
on CodePen.

Try resizing the embed or the .container in the demo itself to see the grid rearrange itself.

Or, if you want something more fancy (and that more closely matches the Brave New Tab Page IIRC):

~

# Spread the word

Feel free to reshare one of the following posts on social media to help spread the word:

• 🦋 Bluesky
• 🦣 Mastodon
• 💼 LinkedIn

~

~