---
title: "Components — Grid"
canonical: https://sky-ui.cf.sky.com/components/grid
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Grid

Grid is a utility component that surfaces Grid properties.

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

---

`Grid` is a utility component that surfaces `Grid` properties. [Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) is a two-dimensional layout method.

```tsx
<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.

```tsx
<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

```tsx
<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

```tsx
<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](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [grid-parent](/core/system/grid-parent/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [overflow](/core/system/overflow/)
- [width](/core/system/width/)