var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),B=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},r=(n,e,i,h)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!m.call(n,t)&&t!==i&&a(n,t,{get:()=>e[t],enumerable:!(h=p(e,t))||h.enumerable});return n};var b=(n,e,i)=>(i=n!=null?l(x(n)):{},r(e||!n||!n.__esModule?a(i,"default",{value:n,enumerable:!0}):i,n)),f=n=>r(a({},"__esModule",{value:!0}),n);var s=u((v,c)=>{c.exports=_jsx_runtime});var w={};B(w,{default:()=>S,frontmatter:()=>y});var o=b(s()),y={id:"simple-grid",category:"layout",title:"SimpleGrid",package:"@chakra-ui/layout",description:"SimpleGrid provides a friendly interface to create responsive grid layouts with ease."};function d(n){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",h3:"h3"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:`import { SimpleGrid } from '@chakra-ui/react' `})}),` `,(0,o.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,o.jsx)(e.p,{children:"Specifying the number of columns for the grid layout."}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,o.jsxs)(e.p,{children:[`You can also make it responsive by passing array or object values into the `,(0,o.jsx)(e.code,{children:"columns"})," prop."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:`// Passing \`columns={[2, null, 3]}\` and \`columns={{sm: 2, md: 3}}\` // will have the same effect. `})}),` `,(0,o.jsx)(e.h3,{id:"auto-responsive-grid",children:"Auto-responsive grid"}),` `,(0,o.jsxs)(e.p,{children:["To make the grid responsive and adjust automatically without passing ",(0,o.jsx)(e.code,{children:"columns"}),`, simply pass the `,(0,o.jsx)(e.code,{children:"minChildWidth"})," prop to specify the ",(0,o.jsx)(e.code,{children:"min-width"}),` a child should have before adjusting the layout.`]}),` `,(0,o.jsxs)(e.p,{children:["This uses css grid ",(0,o.jsx)(e.code,{children:"auto-fit"})," and ",(0,o.jsx)(e.code,{children:"minmax()"})," internally."]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,o.jsx)(e.h3,{id:"changing-the-spacing-for-columns-and-rows",children:"Changing the spacing for columns and rows"}),` `,(0,o.jsxs)(e.p,{children:["Simply pass the ",(0,o.jsx)(e.code,{children:"spacing"}),` prop to change the row and column spacing between the grid items. `,(0,o.jsx)(e.code,{children:"SimpleGrid"})," also allows you pass ",(0,o.jsx)(e.code,{children:"spacingX"})," and ",(0,o.jsx)(e.code,{children:"spacingY"}),` to define the space between columns and rows respectively.`]}),` `,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:` `})})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(d,n)})):d(n)}var S=j;return f(w);})(); ;return Component;

SimpleGrid

Props#

Props#