Container

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

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

Default

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

Fluid

Container which its width: 100% at all breakpoints

Breakpoints

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

Default breakpoints

Breakpoint<650px≥650px≥960px≥1280px≥1400px
default100%650px960px1280px1400px
xs100%650px960px1280px1400px
sm100%100%960px1280px1400px
md100%100%960px1280px1400px
lg100%100%100%1280px1400px
xl100%100%100%100%1400px
fluid100%100%100%100%100%

Auto-layout columns

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

APIs

Container Props

AttributeTypeAccepted valuesDescriptionDefault
fluidbooleantrue / falsewidth: 100% at all breakpointsfalse
responsivebooleantrue / falseSets a max-width at each responsive breakpointtrue
xsbooleantrue / falseExtra small devices (<650px)false
smbooleantrue / falseSmall devices (≥650px)false
mdbooleantrue / falseMedium devices (≥960px)false
lgbooleantrue / falseLarge devices (≥1280px)false
xlbooleantrue / falseExtra large devices (≥1400px)false
gapnumber-Children's spacing2
wrapWrapWrapCSS "flex-wrap"wrap
displayDisplayDisplayCSS "display"block
justifyJustifyJustifyCSS "justify-content"-
directionDirectionDirectionCSS "flex-direction"-
alignItemsAlignItemsAlignItemsCSS "align-items"-
alignContentAlignContentAlignContentCSS "align-content"-
...HTMLAttributes'id', 'className', ...Native element props-

Row Props

AttributeTypeAccepted valuesDescriptionDefault
fluidbooleantrue / falsewidth: 100%true
gapnumber-Children's spacing0
wrapWrapWrapCSS "flex-wrap" propertynowrap
justifyJustifyJustifyCSS "justify-content" propertyflex-start
alignAlignItemsAlignItemsCSS "align-items" propertyflex-start
...HTMLAttributes'id', 'className', ...Native element props-

Col Props

AttributeTypeAccepted valuesDescriptionDefault
spannumber0 - 12Column's width12
offsetnumber-Move columns to the right0
...HTMLAttributes'id', 'className', ...Native element props-

Container types

Wrap

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

Display

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

Justify

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

Direction

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

Align Items

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

Align Content

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