Components
Code examples
You may use any kind of component when using this method.
<Grid templateColumns="repeat(5, 1fr)" gap={3}> <StaticCard colorPalette="yellow" padding={3} width="100%"> Tog </StaticCard> <StaticCard colorPalette="blue" padding={3} width="100%"> Buss </StaticCard> <StaticCard colorPalette="red" padding={3} width="100%"> Fly </StaticCard> <StaticCard colorPalette="green" padding={3} width="100%"> Båt </StaticCard> <StaticCard colorPalette="orange" padding={3} width="100%"> Sykkel </StaticCard> </Grid>
Guidelines
When utilising Grid, it's important to know the fundamentals of grid in css. Take a look at CSS TricksEkstern lenke, who have a comprehensive guide for better understanding.
Code
<Grid />
import { Grid } from "@vygruppen/spor-react";
Composes Box-props
<GridItem />
import { GridItem } from "@vygruppen/spor-react";
Also Composes Box-props
Props
Name | Type | Required? | Description |
|---|---|---|---|
colEnd | ResponsiveValue<number | "auto"> | ||
colSpan | ResponsiveValue<number | "auto"> | The number of columns the grid item should span. | |
colStart | ResponsiveValue<number | "auto"> | The column number the grid item should start. | |
rowEnd | ResponsiveValue<number | "auto"> | ||
rowSpan | ResponsiveValue<number | "auto"> | ||
rowStart | ResponsiveValue<number | "auto"> |