Setup
Drop a single stylesheet link into your HTML and start building immediately. No bundler, no config, no JavaScript framework required. Works with any backend.
When cards in a grid have different content lengths, their internal regions (header, body, footer) sit at different heights. data-layout-subgrid shares row tracks across siblings so regions align. Compare the blue header bands and grey footer bands below.
Each card sizes its header, body, and footer independently. The blue header bands end at different heights. The grey footer bands start at different heights.
Drop a single stylesheet link into your HTML and start building immediately. No bundler, no config, no JavaScript framework required. Works with any backend.
Reflows automatically.
Design token control:
Screen readers just work.
Same cards, but children share the parent's row tracks. All blue header bands end at the same line. All grey footer bands start at the same line. Content areas fill the middle uniformly.
Drop a single stylesheet link into your HTML and start building immediately. No bundler, no config, no JavaScript framework required. Works with any backend.
Reflows automatically.
Design token control:
Screen readers just work.