simplegrid.mdx

import SEO from '../components/SEO'

SimpleGrid

SimpleGrid provides a friendly interface to create responsive grid layouts with ease. It renders a div element with display: grid.

Import

import { CSimpleGrid } from '@chakra-ui/vue'

Usage

Specifying the number of columns for the grid layout.

<c-simple-grid :columns="2" :spacing="10">
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" 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="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>

Auto-responsive grid

To make the grid responsive adjust automatically without passing columns, simply pass the minChildWidth prop to specify the min-width a child should have before adjusting the layout.

This uses css grid auto-fit and minmax() internally.

<c-simple-grid min-child-width="120px" spacing="40px">
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>

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 spacingX and spacingY 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="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
  <c-box background="green" height="80px"></c-box>
</c-simple-grid>

Props

SimpleGrid composes Box so you can pass all the Box props and css grid props with addition of these:

Name	Type	Default	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.