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.
At vy.no we use a 12-column layout for desktop, and 6-columns for mobile and smaller screens. Sometimes elements of the page starts on an inner column, while other will start on the first. To achieve this, we need to utilise props colStart and colSpan. colStart will help us define which of the columns we want to start on, while colSpan will decide how many columns we want to span it across on the page.
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"> |