SimpleGrid
SimpleGrid is a user-friendly tool for effortlessly creating responsive grid layouts, utilizing a div element with display: grid.
Import
import { CSimpleGrid } from '@chakra-ui/vue-next';Usage
Specifying the number of columns for the grid layout.
Sample Tag :
<c-simple-grid :columns="2" :spacing="10"> <c-box background="green" height="80px"></c-box> <c-box background="red" height="80px"></c-box> <c-box background="blue.900" height="80px"></c-box> <c-box background="darkorange" height="80px"></c-box> <c-box background="yellow" height="80px"></c-box></c-simple-grid>You can also make it responsive by passing array or object values into the columns prop.
<c-simple-grid :columns="[2, null, 3]" spacing="40px"> <c-box background="green" height="80px"></c-box> <c-box background="red" height="80px"></c-box> <c-box background="blue.900" height="80px"></c-box> <c-box background="darkorange" height="80px"></c-box> <c-box background="yellow" height="80px"></c-box></c-simple-grid>Auto-responsive grid#
To make the grid responsive adjust automatically without passing columns, simply pass the min-child-width prop to specify the min-width a child should have before adjusting the layout.
This uses css grid auto-fit and minmax() internally.
Changing the spacing for columns and rows
Simply pass the spacing prop to change the row and column spacing between the grid items. SimpleGrid also allows you pass spacing-x and spacing-y to define the space between columns and rows respectively.
<c-simple-grid :columns="2" spacing-x="40px" spacing-y="20px"> <c-box background="green" height="80px"></c-box> <c-box background="red" height="80px"></c-box> <c-box background="blue.900" height="80px"></c-box> <c-box background="darkorange" height="80px"></c-box> <c-box background="yellow" height="80px"></c-box></c-simple-grid>Props
SimpleGrid composes Box so you can pass all the Box props and CSS grid props with the addition of these:
| Name | Type | Description |
|---|---|---|
columns | number | The number of columns |
spacing | GridProps["gridGap"] | The gap between the grid items |
spacingX | GridProps["gridGap"] | The column gap between the grid items |
spacingY | GridProps["gridGap"] | The row gap between the grid items |
minChildWidth | CSSProperties["minWidth"] | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. |
Edit this page on GitHub