Grid
A 24-column grid layout system. Pair it with oas-grid-item to divide column widths, with support for gap, offset and a custom total column count; setting columns switches to an auto equal-width layout (simple-grid).
Basic grid
Three equal columns
span 8
span 8
span 8
Unequal columns
Unequal columns
span 6
span 12
span 6
Offset
Offset
span 12
span 8 offset 4
span 4 offset 6
Custom total columns
Custom cols
span 6 / 12 cols
span 6 / 12 cols
span 4
span 8
Auto columns (simple-grid)
Setting columns divides the width equally with repeat(n, 1fr); child span is ignored (span only takes effect without columns), and it coexists with the 24-column grid without conflict.
columns auto equal-width
1
2
3
4
5
6
columns ignores span
span 8 ignored
span 24 ignored
span 8 ignored
span 24 ignored
Large gap
Gap
span 8
span 8
span 8
API
oas-grid
| Attribute | Description | Type | Default |
|---|---|---|---|
cols | Total column count | string | 24 |
columns | Auto equal-width count (simple-grid; when set, child span is ignored) | string | — |
gap | Gap | string | 0 |
| Name | Description |
|---|---|
| default | — |
oas-grid-item
| Attribute | Description | Type | Default |
|---|---|---|---|
offset | Number of columns offset on the left | string | 0 |
span | Number of columns spanned | string | 24 |
| Name | Description |
|---|---|
| default | — |
oas-grid renders as CSS Grid where each child occupies a share of the 24 columns; oas-grid-item declares its footprint with span. Setting columns divides equally and ignores span, so plain elements can be placed directly.