Grid

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

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

Dynamically scale container width while maintaining spacing.

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

Use different layouts for different screen widths.

Auto fill remaining width.

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

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%`

Attribute	Type	Accepted values	Description	Default
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`
direction	`Direction`	Direction	CSS "flex-direction" property	-
justify	`Justify`	Justify	CSS "justify-content" property	-
alignItems	`AlignItems`	AlignItems	CSS "align-items" property	-
alignContent	`AlignContent`	AlignContent	CSS "align-content" property	-
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
gap	`number`	-	spacing of children	0
wrap	`Wrap`	Wrap	CSS "flex-wrap" property	`wrap`
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';