Copy page

Layout

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

Syntax

Markdown
:::grid{cols=3}
:::card
### Lorem
:::
:::card
### Ipsum
:::
:::card
### Dolor
:::
:::

Markdown (grid layout)
--- layout=grid cols=2

# Grid layout

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

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

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

Attributes and props

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

In other formats

Format	Status	Notes
deck	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
docs	Available	Through <StoryEmbed slug="…" /> in any page of a site.
motion	Available	Animated block in a film.
report	Planned · P6	Section of a paged report.
toon	Planned · P7	Panel of a vertical strip.
book	Planned · P8	Block of a printable chapter.