var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var G=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var a in e)i(r,a,{get:e[a],enumerable:!0})},d=(r,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!u.call(r,t)&&t!==a&&i(r,t,{get:()=>e[t],enumerable:!(o=h(e,t))||o.enumerable});return r};var I=(r,e,a)=>(a=r!=null?p(g(r)):{},d(e||!r||!r.__esModule?i(a,"default",{value:r,enumerable:!0}):a,r)),f=r=>d(i({},"__esModule",{value:!0}),r);var c=G((C,l)=>{l.exports=_jsx_runtime});var j={};b(j,{default:()=>y,frontmatter:()=>w});var n=I(c()),w={id:"grid",category:"layout",title:"Grid",package:"@chakra-ui/layout",description:"Grid is a layout for managing grid layouts"};function s(r){let e=Object.assign({h2:"h2",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong",p:"p"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Grid, GridItem } from '@chakra-ui/react' `})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Grid:"})," The main wrapper with ",(0,n.jsx)(e.code,{children:"display: grid"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"GridItem:"})," Used as a child of ",(0,n.jsx)(e.code,{children:"Grid"}),` to control the span, and start positions within the grid.`]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"template-columns",children:"Template columns"}),` `,(0,n.jsxs)(e.p,{children:["Here's an example of using grid template columns with the ",(0,n.jsx)(e.code,{children:"grid"}),` component, and applying a `,(0,n.jsx)(e.code,{children:"gap"})," or space between the grid items."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h2,{id:"spanning-columns",children:"Spanning columns"}),` `,(0,n.jsxs)(e.p,{children:[`In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `,(0,n.jsx)(e.code,{children:"colSpan"})," prop to the ",(0,n.jsx)(e.code,{children:"GridItem"}),` component to span across columns and also pass the `,(0,n.jsx)(e.code,{children:"rowSpan"}),` component to span across rows. You also need to specify the `,(0,n.jsx)(e.code,{children:"templateColumns"})," and ",(0,n.jsx)(e.code,{children:"templateRows"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h2,{id:"starting-and-ending-lines",children:"Starting and ending lines"}),` `,(0,n.jsxs)(e.p,{children:["Pass the ",(0,n.jsx)(e.code,{children:"colStart"})," and ",(0,n.jsx)(e.code,{children:"colEnd"})," prop to ",(0,n.jsx)(e.code,{children:"GridItem"}),` component to make an element start or end at the `,(0,n.jsx)(e.code,{children:"nth"})," grid position."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h2,{id:"template-areas",children:"Template areas"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"templateAreas"}),` prop specifies areas within the grid layout. Use template literals to name the area. Now you can reference the area by passing `,(0,n.jsx)(e.code,{children:"area"}),` prop in the `,(0,n.jsx)(e.code,{children:""})," component."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Header Nav Main Footer `})})]})}function x(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var y=x;return f(j);})(); ;return Component;

Grid

Props#

Grid Props#

GridItem Props#

Props#

Grid Props#

GridItem Props#