Anchored Grid Layout

Back to index

This demo uses css anchor positioning to align content areas to a dynamic css grid. This allows native animations when changing the grid layout.

The grid cell anchors must be sized correctly, however, or else the layout will be wrong. This demo duplicates the content to ensure their sizes match. In a real app you could sync sizes with Javascript, or use fixed dimensions instead of fluid/automatic.

Set Layout:
--preferred-layout:
--resized-to:
Introduction

Main Content

Main Content

Main Content

Footer
Introduction

Main Content

Main Content

Main Content