var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!g.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return t};var x=(t,e,i)=>(i=t!=null?l(p(t)):{},c(e||!t||!t.__esModule?r(i,"default",{value:t,enumerable:!0}):i,t)),y=t=>c(r({},"__esModule",{value:!0}),t);var d=b((W,s)=>{s.exports=_jsx_runtime});var w={};f(w,{default:()=>j,frontmatter:()=>C});var n=x(d()),C={id:"container",category:"layout",title:"Container",package:"@chakra-ui/layout",description:"Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid."};function h(t){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",a:"a",blockquote:"blockquote",ul:"ul",li:"li"},t.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 { Container } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:["To contain any piece of content, wrap it in the ",(0,n.jsx)(e.code,{children:"Container"})," component."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production `})}),` `,(0,n.jsx)(e.h2,{id:"container-size",children:"Container Size"}),` `,(0,n.jsxs)(e.p,{children:["By default, the ",(0,n.jsx)(e.code,{children:"Container"})," component sets the ",(0,n.jsx)(e.code,{children:"maxWidth"}),` of the content to 60 characters (`,(0,n.jsx)(e.code,{children:"60ch"}),") but you can customize this by passing custom ",(0,n.jsx)(e.code,{children:"maxWidth"}),` values or changing the size tokens defined in `,(0,n.jsx)(e.a,{href:"https://chakra-ui.com/docs/styled-system/theme#sizes",children:"theme.sizes.container"}),"."]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["About the default value: The ",(0,n.jsx)(e.code,{children:"ch"}),` unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font.`]}),` `,(0,n.jsxs)(e.li,{children:["If you are curious about the reason for this default value of ",(0,n.jsx)(e.code,{children:"60"}),` characters, consider this explanation about `,(0,n.jsx)(e.a,{href:"https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/#line-length",children:"line length"}),` from Better Web Type.`]}),` `]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` "md" Container "550px" Container "container.sm" Container `})}),` `,(0,n.jsx)(e.h2,{id:"centering-the-children",children:"Centering the children"}),` `,(0,n.jsxs)(e.p,{children:[`In some cases, the width of the content can be smaller than the container's width. You can use the `,(0,n.jsx)(e.code,{children:"centerContent"}),` prop to center the content. It renders a flexbox with `,(0,n.jsx)(e.code,{children:"flexDirection"})," set to ",(0,n.jsx)(e.code,{children:"column"})," and ",(0,n.jsx)(e.code,{children:"alignItems"})," set to ",(0,n.jsx)(e.code,{children:"center"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` There are many benefits to a joint design and development system. Not only does it bring benefits to the design team, but it also brings benefits to engineering teams. It makes sure that our experiences have a consistent look and feel, not just in our design specs, but in production. `})})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var j=k;return y(w);})(); ;return Component;

Container

Props#

centerContent

`centerContent`