Two modes determined by which attrs are present. Track grid (columns/rows): parent declares track sizes, children place themselves. Unit grid: fixed coordinate canvas.
grid
tagtrack & unit gridTwo modes determined by which attrs are present. Track grid (columns/rows): parent declares track sizes, children place themselves. Unit grid: fixed coordinate canvas.
A grid range fills the spanned tracks (no w/h needed). A single value hugs content.
| Attr | Type | Description |
|---|---|---|
columns | number | |
rows | number | |
col-gap | number | string | |
row-gap | number | string | |
h | number | 'fill' | Absent = hug children |
fill | fill | |
name | string | |
x | number | |
y | number | |
w | number | 'fill' | Absent = hug children |
p | string | number | Padding shorthand. Single value, "v h", or "top right bottom left". Alias: padding |
pt | number | Top padding override |
pr | number | Right padding override |
pb | number | Bottom padding override |
pl | number | Left padding override |
fill-style | string | |
effect-style | string | |
radius | number | string | |
corner-smoothing | number | |
border | string | |
border-color | color | token | |
border-width | number | |
border-style | solid dashed dotted | |
border-align | center inside outside | |
shadow | string | |
clip | boolean | |
clip-path | string | |
overflow-x | hidden visible scroll auto | |
overflow-y | hidden visible scroll auto | |
border-image | string | |
outline | string | |
outline-offset | number |
Track grid — dashboard layout
<grid columns="200 1fr" rows="56 1fr" gap="0" w="fill" h="fill"> <row gc="1/-1" gr="1" fill="#fff" p="0 20" align="middle-left"> <text value="Dashboard" font-size="17" font-weight="600" /> </row> <col gc="1" gr="2" fill="#f7f7f7" p="12" gap="4">...</col> <col gc="2" gr="2" p="32" gap="16">...</col> </grid>