# Grid

A grid places cards or blocks side by side. Use the `:::grid` directive anywhere in a slide, or the
`grid` layout to turn every block after the title into a cell.

## Live demo

<StoryEmbed slug="grid" />

## Syntax

```md title="Markdown"
:::grid{cols=3}
:::card
### Lorem
:::
:::card
### Ipsum
:::
:::card
### Dolor
:::
:::
```

```md title="Markdown (grid layout)"
--- layout=grid cols=2

# Grid layout

:::card
### Lorem ipsum
:::

:::card
### Dolor sit amet
:::
```

```mdx title="MDX"
<Grid cols={3}>
  <Card title="Lorem">Ipsum dolor sit amet.</Card>
  <Card title="Ipsum">Consectetur adipiscing elit.</Card>
</Grid>
```

## Attributes and props

| Attribute | Type               | Default | Description       |
| --------- | ------------------ | ------- | ----------------- |
| `cols`    | `1 \| 2 \| 3 \| 4` | `2`     | Number of columns |

More than 4 cards (or more than 3 columns) triggers a density warning, see the density rules on
[docs.recit.dev](https://docs.recit.dev).

## In other formats

<FormatSupport />