Components

Grid

Grid is for managing grid layouts.

Examples

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 colorScheme="yellow" padding={3} width="100%">
    Tog
  </StaticCard>
  <StaticCard colorScheme="blue" padding={3} width="100%">
    Buss
  </StaticCard>
  <StaticCard colorScheme="red" padding={3} width="100%">
    Fly
  </StaticCard>
  <StaticCard colorScheme="green" padding={3} width="100%">
    Båt
  </StaticCard>
  <StaticCard colorScheme="darkBlue" 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 colorScheme="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, null, 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, null, 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>