Grid

Basic Usage

The most basic grid layout, using the cols property to set the number of columns and the gap property to control spacing.

First column

Second column

Third column

<Grid cols={3} gap="md">
<div class="cosy:bg-base-200 cosy:p-4">First column</div>
<div class="cosy:bg-base-200 cosy:p-4">Second column</div>
<div class="cosy:bg-base-200 cosy:p-4">Third column</div>
</Grid>

Responsive Layout

By passing a responsive object, different numbers of columns can be displayed at different screen sizes.

Responsive grid

At different screen sizes

Shows different number of columns

<Grid cols={{base: 1, md: 2, lg: 3}} gap="lg">
<div class="cosy:bg-base-200 cosy:p-4">Responsive grid</div>
<div class="cosy:bg-base-200 cosy:p-4">At different screen sizes</div>
<div class="cosy:bg-base-200 cosy:p-4">Shows different number of columns</div>
</Grid>

Custom Spacing

Row spacing (rowGap) and column spacing (colGap) can be set separately.

Large row gap

Small column gap

Third item

Fourth item

<Grid cols={2} rowGap="lg" colGap="sm">
<div class="cosy:bg-base-200 cosy:p-4">Large row gap</div>
<div class="cosy:bg-base-200 cosy:p-4">Small column gap</div>
<div class="cosy:bg-base-200 cosy:p-4">Third item</div>
<div class="cosy:bg-base-200 cosy:p-4">Fourth item</div>
</Grid>