Grid
Properties#
| Prop | Type | Default | Description |
|---|---|---|---|
cols |
number |
auto | Number of equal-width columns. When omitted, the grid uses one column per child. |
Examples#
Auto Columns#
Without cols, each child becomes its own column.
One
First card.
Two
Second card.
Three
Third card.
<scalar-grid>
<scalar-card icon="phosphor/regular/cube" title="One">First card.</scalar-card>
<scalar-card icon="phosphor/regular/cube" title="Two">Second card.</scalar-card>
<scalar-card icon="phosphor/regular/cube" title="Three">Third card.</scalar-card>
</scalar-grid><Grid>
<Card icon="phosphor/regular/cube" title="One">First card.</Card>
<Card icon="phosphor/regular/cube" title="Two">Second card.</Card>
<Card icon="phosphor/regular/cube" title="Three">Third card.</Card>
</Grid>Fixed Columns#
Set cols to control the number of columns. Extra children wrap onto new rows.
One
First card.
Two
Second card.
Three
Third card.
Four
Fourth card.
<scalar-grid cols="2">
<scalar-card title="One">First card.</scalar-card>
<scalar-card title="Two">Second card.</scalar-card>
<scalar-card title="Three">Third card.</scalar-card>
<scalar-card title="Four">Fourth card.</scalar-card>
</scalar-grid><Grid cols={2}>
<Card title="One">First card.</Card>
<Card title="Two">Second card.</Card>
<Card title="Three">Third card.</Card>
<Card title="Four">Fourth card.</Card>
</Grid>