@chakra-ui/layout

A set of layout primitives that make it super easy to manage page and
components.

Installation

``sh
yarn add @chakra-ui/layout

or

npm i @chakra-ui/layout
`

Import Components

`jsx
import { Box, Flex, Stack, Grid, Wrap, AspectRatio } from "@chakra-ui/layout"
`

Usage

Box is just a div on steroids. It gives you the ability to pass style props

`jsx

Welcome to Box

`

Flex is just a Box with display: flex

`jsx

Box 1
Box 2

`

Stack is used to group elements and apply a spacing between them. It stacks its
children vertically by default.

`jsx

Box 1
Box 2

`

AspectRatio is used to constrain its child to specific aspect ratio. It is
mostly used for embedding videos, images, and maps.

`jsx



`

Wrap is used to manage the distribution of child elements that are liable to
wrap. It is mostly used for button groups, tag group, badge group, and chips.

`jsx

Box 1
Box 2

`

Badge is used to render a badge. It can come in different variants and color
schemes as defined in the theme.components.Badge

`jsx

Verified

`

Center is used to vertically and horizontally center its child

`jsx





`

Container is used to manage content areas on a website or blog. It centers
itself using margin-left: auto and margin-right: auto. It also applies a
default max-width of 60ch (60 characters)

`jsx



`

Spacer is a component that takes up the remaining space in a flex container. It
is mostly useful to manage space and wrapping in flex containers

`jsx





``