Grid

Grid layout component for responsive layouts using CSS Grid.

Basic Example

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6


<.grid cols={3} gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</.grid>

Responsive Grid

Item 1

Item 2

Item 3

Item 4


<.grid cols={1} cols_md={2} cols_lg={4} gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</.grid>

This grid will show 1 column on mobile, 2 columns on medium screens, and 4 columns on large screens.

With Cards

Card 1

Content for card 1

Card 2

Content for card 2


<.grid cols={1} cols_md={2} gap={6}>
  <.card>
    <h3>Card 1</h3>
    <p>Content</p>
  </.card>
  <.card>
    <h3>Card 2</h3>
    <p>Content</p>
  </.card>
</.grid>

Props

Prop	Type	Default	Description
cols	integer	1	Number of columns (base/default)
cols_sm	integer	-	Number of columns on small screens (≥640px)
cols_md	integer	-	Number of columns on medium screens (≥768px)
cols_lg	integer	-	Number of columns on large screens (≥1024px)
cols_xl	integer	-	Number of columns on extra large screens (≥1280px)
gap	integer	4	Gap between grid items (Tailwind gap value: 0-12)
class	string	""	Additional CSS classes