Grid

import { Grid } from '@sky-uk/ui-core';

Grid is a utility component that surfaces Grid properties. Grid is a two-dimensional layout method.

<Grid $gridTemplateColumns="repeat(3, 1fr)" $gap={4}>
    <Box $bgColor={'grey10'} $padding={3}>1/3</Box>
    <Box $bgColor={'grey10'} $padding={3}>1/3</Box>
    <Box $bgColor={'grey10'} $padding={3}>1/3</Box>
</Grid>

Nesting Grid components

As well as providing parent CSS grid styles Grid also provides child grid properties such as $gridColumn. This allows us to create nested grid layouts when required.

<Grid $gridTemplateColumns="repeat(4, 1fr)" $gap={4}>
    <Grid $gridTemplateColumns="1fr 1fr" $gridColumn="1/4" $gap={4}>
        <Box $bgColor={'grey10'} $padding={3}>3/8 nested</Box>
        <Box $bgColor={'grey10'} $padding={3}>3/8 nested</Box>
    </Grid>
    <Box $bgColor={'grey40'} $padding={3}>1/4</Box>
</Grid>

Auto Grids

To build a Grid that allows for the creation of implicit rows or columns, you can use either $gridAutoRows or $gridAutoColumns. This is useful when you want to have rows or columns of equal height (for rows) or equal width (for columns) but the number of children may vary.

Auto positioning works for grid items that are not placed inside a row that has been sized by $gridTemplateRows or $gridTemplateColumns.

If you want to keep control over how the grid items are auto placed then this can be used in conjunction with $gridAutoFlow. If using $gridAutoColumns you will need to use $gridAutoFlow="column" or your grid items will automatically be in rows.

Auto rows

<Grid $gridAutoRows="auto" $gap={4}>
    <Box $bgColor={'grey10'} $padding={3}>Row <br/> Extra content making this taller than the other rows</Box>
    <Box $bgColor={'grey10'} $padding={3}>Row</Box>
    <Box $bgColor={'grey10'} $padding={3}>Row</Box>
</Grid>

Auto columns

<Grid $gridAutoColumns="min-content" $gridAutoFlow="column" $gap={4}>
    <Box $bgColor={'grey10'} $padding={3}>1/3 <br/> Extra content making this taller than the other columns</Box>
    <Box $bgColor={'grey10'} $padding={3}>1/3</Box>
    <Box $bgColor={'grey10'} $padding={3}>1/3</Box>
</Grid>

System Modifiers

The Grid component supports the props applied using the following system modifiers:

• display
• flex-child
• grid-child
• grid-parent
• height
• margin
• overflow
• width