Basic Use

1
  import Grid from '@/components/mdx/Grid.astro'
1
<Grid>
2
  <p class="p-4 bg-primary text-white">1</p>
3
  <p class="p-4 bg-primary text-white">2</p>
4
</Grid>

Example

1

2

Specifying Grid Columns

You can specify the number of columns for the grid by passing the cols prop. The value should be a number between 1 and 12.

1

2

3

1
<Grid cols='3'>
2
  <p class="p-4 bg-primary text-white">1</p>
3
  <p class="p-4 bg-primary text-white">2</p>
4
  <p class="p-4 bg-primary text-white">3</p>
5
</Grid>

Using with Other Components

You can use other components in the grid as well:

1

Card Component

2

3

1
<Grid cols='3'>
2
  <p class="p-4 bg-primary text-white">1</p>
3
  <Card title="Card Component">
4
    <p class="p-4 bg-primary text-white">2</p>
5
  </Card>
6
  <p class="p-4 bg-primary text-white">3</p>
7
</Grid>