# @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
```