zilly-ui/src/container/container.mdx

Zilly web react ui components

---
name: Container
---

import { Playground, Props, } from "docz";
import  Container  from "./container";

 

# Container
The container centers your content horizontally. It's the most basic layout element.

## Props

|Property | Description | Type | Default |
:---|:---|:---|:---|
|children *| - | node |  - |
|classes|	Override or extend the styles applied to the component. | object |  - |
|component|	The component used for the root node. Either a string to use a DOM element or a component. | elementType |  'div' |
|fixed|	Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default. | bool | false |
| maxWidth | Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth. | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'lg' | 


<Props of={Container} />

## Basic usage
A fluid container width is bounded by that maxWidth property value.
<Playground>
   <Container  maxWidth="sm" style={{backgroundColor: '#cfe8fc', height: '100vh'}}/>
</Playground>


## Fixed
If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed property. The max-width matches the min-width of the current breakpoint.

<Playground>
   <Container  fixed style={{backgroundColor: '#cfe8fc', height: '100vh'}}/>
</Playground>