The grid identity system lets semantic HTML elements auto-register to grid areas based on their element type.
HTML declares structure, CSS assigns layout.
data-layout="regions" creates a header / content / footer grid on any element. Semantic children auto-place without explicit layout attributes.
A <div> with data-layout="regions". The <header>, <section>, and <footer> children auto-register to named grid areas.
This section content auto-places into the content grid area. No explicit placement needed.
Works on any element. An <article> with regions is a natural fit for blog posts, cards, and content blocks.
The grid identity system lets semantic HTML elements auto-register to grid areas based on their element type.
HTML declares structure, CSS assigns layout.
Children that are not <header>, <section>, <footer>, or [slot] are implicitly placed in the content area.
This bare paragraph auto-places into the content area without needing a <section> wrapper.
The big win: data-layout="grid" wrapping data-layout="regions" articles. Each card auto-places its header, content, and footer without any explicit layout attributes on children.
Optimized for speed with lazy loading and tree-shaking built in.
WCAG 2.1 AA compliant with semantic HTML and ARIA support.
CSS custom properties for full design token control.
Container queries and fluid layouts adapt to any viewport.
data-layout="regions" is structural only (grid placement). <layout-card> adds visual chrome (borders, shadows, padding) on top of the same grid structure.
Content goes here. No visual styling from the layout.
Content goes here. Visual chrome comes from the component.