Container

A component for fixing an element's width to the current breakpoint.

import { Container, Row, Col } from '@nextui-org/react';

Container which sets a max-width and a default gap at each responsive breakpoint

Container which its width: 100% at all breakpoints

Setting it to a breakpoint (xs, sm, md, lg, xl) will set the Container as fluid until the specified breakpoint.

Breakpoint	<650px	≥650px	≥960px	≥1280px	≥1400px
default	`100%`	650px	960px	1280px	1400px
xs	`100%`	650px	960px	1280px	1400px
sm	`100%`	`100%`	960px	1280px	1400px
md	`100%`	`100%`	960px	1280px	1400px
lg	`100%`	`100%`	`100%`	1280px	1400px
xl	`100%`	`100%`	`100%`	`100%`	1400px
fluid	`100%`	`100%`	`100%`	`100%`	`100%`

When no column widths are specified the Col component will render equal width columns.

Attribute	Type	Accepted values	Description	Default
fluid	`boolean`	`true / false`	`width: 100%` at all breakpoints	`false`
responsive	`boolean`	`true / false`	Sets a `max-width` at each responsive breakpoint	`true`
xs	`boolean`	`true / false`	Extra small devices (<650px)	`false`
sm	`boolean`	`true / false`	Small devices (≥650px)	`false`
md	`boolean`	`true / false`	Medium devices (≥960px)	`false`
lg	`boolean`	`true / false`	Large devices (≥1280px)	`false`
xl	`boolean`	`true / false`	Extra large devices (≥1400px)	`false`
gap	`number`	-	Children's spacing	2
wrap	`Wrap`	Wrap	CSS "flex-wrap"	`wrap`
display	`Display`	Display	CSS "display"	`block`
justify	`Justify`	Justify	CSS "justify-content"	-
direction	`Direction`	Direction	CSS "flex-direction"	-
alignItems	`AlignItems`	AlignItems	CSS "align-items"	-
alignContent	`AlignContent`	AlignContent	CSS "align-content"	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Native element props	-

Attribute	Type	Accepted values	Description	Default
fluid	`boolean`	`true / false`	`width: 100%`	`true`
gap	`number`	-	Children's spacing	0
wrap	`Wrap`	Wrap	CSS "flex-wrap" property	`nowrap`
justify	`Justify`	Justify	CSS "justify-content" property	`flex-start`
align	`AlignItems`	AlignItems	CSS "align-items" property	`flex-start`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Native element props	-

Attribute	Type	Accepted values	Description	Default
span	`number`	`0 - 12`	Column's width	`12`
offset	`number`	-	Move columns to the right	`0`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`HTMLAttributes`	`'id', 'className', ...`	Native element props	-

type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';

type Display =
  | 'flex'
  | 'block'
  | 'grid'
  | 'inline'
  | 'inline-block'
  | 'inline-flex'
  | 'inline-grid';

type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';

type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';

type AlignContent =
  | 'stretch'
  | 'center'
  | 'flex-start'
  | 'flex-end'
  | 'space-between'
  | 'space-around';