data-layout-density
Adjust spacing density for all children of a container. Controls gap sizes, line-height, and overall spacing.
Overview
Use data-layout-density on any container to adjust spacing for all children. The density cascades to all descendants, making it easy to switch between compact and spacious layouts.
Density Modes
| Value | Effect | Use Case |
|---|---|---|
compact | ~25% smaller spacing, tighter line-height | Dashboards, data tables, admin UIs |
| (default) | Standard spacing | General use |
spacious | ~50% larger spacing, relaxed line-height | Marketing pages, landing pages |
Gap Modifier Reference
The data-layout-gap attribute controls spacing in all layout types.
| Value | Size Token | Pixels |
|---|---|---|
none | 0 | 0px |
3xs | --size-3xs | 2px |
2xs | --size-2xs | 4px |
xs | --size-xs | 8px |
s | --size-s | 12px |
m | --size-m | 16px |
l | --size-l | 24px |
xl | --size-xl | 32px |
2xl | --size-2xl | 48px |
3xl | --size-3xl | 64px |