Site settings
Change the appearance of the site to suit your preferences
Grid
Grid is for managing grid layouts.
Template columns
An example using grid template columns, with applying a gap-prop.
<Grid templateColumns="repeat(5, 1fr)" gap={6}> <GridItem width="100%" height="10" bg="pine" borderRadius="sm" /> <GridItem width="100%" height="10" bg="pine" borderRadius="sm" /> <GridItem width="100%" height="10" bg="pine" borderRadius="sm" /> <GridItem width="100%" height="10" bg="pine" borderRadius="sm" /> <GridItem width="100%" height="10" bg="pine" borderRadius="sm" /> </Grid>
You may also 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>
Spanning columns
You may need to control certain grid items to span a specific amount of columns or rows, instead of an even distribution. Grid will need specification of templateColumns and templateRows, while the child components will need colSpan prop to span across columns and rowSpan prop to span across rows. It's safest to use GridItem in these situations, as they have the correct props.
<Grid height="200px" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" gap={4} > <GridItem rowSpan={2} colSpan={1}> <StaticCard colorPalette="yellow" width="100%" height="100%" padding={3}> Side </StaticCard> </GridItem> <GridItem colSpan={2} backgroundColor="pine" borderRadius="sm" /> <GridItem colSpan={2} backgroundColor="pine" borderRadius="sm" /> <GridItem colSpan={4} backgroundColor="pine" borderRadius="sm" /> </Grid>
12-column layout
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.
<Grid templateColumns="repeat(12, 1fr)" // Repeat 12 times, and each should take up 1 fraction of space across columnGap={4} // gap between columns rowGap={4} // gap between rows > <GridItem colStart={1} colSpan={12}> <Heading as="h2" variant="xl-display">I start at the first column, and will span across 12 columns.</h1> </GridItem> <GridItem colStart={2} colSpan={10}> I will start on the second column, and span across 10 columns. I will start on the second column, and span across 10 columns. I will start on the second column, and span across 10 columns. I will start on the second column, and span across 10 columns. </GridItem> </Grid>
And to make it responsive; our component-props takes in an array of values, which targets our breakpoints (sm, md, lg, xl).
<Grid templateColumns={["repeat(6, 1fr)", null, null, "repeat(12, 1fr)"]} columnGap={[2, 3, null, 4]} rowGap={[2, null, null, 3]} width="100%" maxWidth="container.xl" marginX="auto" > <GridItem colStart={1} colSpan={[6,null, 6, 12]}> <Heading as="h2" variant="xl-display">I start at the first column, and will span across all columns.</h1> </GridItem> <GridItem colStart={[1, null, null, 2]} colSpan={[6, null, 6, 10]}> On desktop, I will start on the second column, and span across 10 columns. On mobile, I will start on the first column, and span across all. On desktop, I will start on the second column, and span across 10 columns. On mobile, I will start on the first column, and span across all. </GridItem> </Grid>