Grid
Here we're using CSS grid. By default, there is only one column and no gap between elements.
File to include
@import "components/grid";Item
Item
Item
Item
Item
Item
<div class="grid" data-col="4" data-gap="m">
</div>Attributes
| Name | Example value | Possible values | Default | Required |
|---|---|---|---|---|
| data-col | 6 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 1 | No |
| data-gap | xxl | "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | None | No |
| data-justify-items | end | "start" | "end" | "center" | "stretch" | stretch | No |
| data-align-items | center | "start" | "end" | "center" | "stretch" | stretch | No |
| data-justify-content | space-between | "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly" | None | No |
| data-align-content | space-around | "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly" | None | No |
| data-inline | - | - | None | No |