Grid

The layout Grid adapts to screen size and orientation, ensuring consistency across layouts.

import { Grid } from '@nextui-org/react';

Default

Dynamically scale container width while maintaining spacing.

Fluid

Containers for wrapping and scaling. The column widths apply at all breakpoints (i.e. xs and up).

Responsive

Use different layouts for different screen widths.

Auto width

Auto fill remaining width.

Hide elements

Hide elements when unit size is 0 (i.e. sm={0} this will hide the element for resolutions greater than sm).

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%

APIs

Grid Props

AttributeTypeAccepted valuesDescriptionDefault
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
directionDirectionDirectionCSS "flex-direction" property-
justifyJustifyJustifyCSS "justify-content" property-
alignItemsAlignItemsAlignItemsCSS "align-items" property-
alignContentAlignContentAlignContentCSS "align-content" property-
...HTMLAttributes'id', 'className', ...Native element props-

Grid.Container Props

AttributeTypeAccepted valuesDescriptionDefault
gapnumber-spacing of children0
wrapWrapWrapCSS "flex-wrap" propertywrap
...HTMLAttributes'id', 'className', ...Native element props-

Grid 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';