Back to components
ComponentsGrid
A responsive grid component for creating flexible layouts with customizable column counts for desktop, tablet, and mobile devices.
Component
Insert action 1
Insert action 2
Insert action 3
Props
| Props | Default | Type |
|---|---|---|
cols | 3 | number |
tabletCols | 2 | number |
mobileCols | 1 | number |
gapClass | 'gap-6' | string |
Usage
cols
Sets the number of columns for desktop viewports.
Max columns: Up to 6 columns.
<template>
<Grid :cols="4">
...
</Grid>
</template>
tabletCols
Sets the number of columns for tablet viewports.
Max columns: Up to 4 columns.
<template>
<Grid :tabletCols="3">
...
</Grid>
</template>
mobileCols
Sets the number of columns for mobile viewports.
Max columns: Up to 4 columns.
<template>
<Grid :mobileCols="2">
...
</Grid>
</template>
gapClass
Sets the gap between grid items using Tailwind CSS gap classes.
<template>
<Grid gapClass="gap-8">
...
</Grid>
</template>