Grid

Equal-width columns that wrap into rows.

import { Grid } from '@textui/core';

<Grid columns={3} gap={1}>
  <text content="one" />
  <text content="two" />
  <text content="three" />
  <text content="four" />
</Grid>

Props

| Prop | Type | Default | | | — | — | — | — | | columns | number | required | |

Plus everything on BoxProps.

columns is required and fixed: this is not a responsive grid, and it will not drop to fewer columns on a narrow terminal by itself. Change columns from a breakpoint or from measured width when that matters.

Every column is the same width. For columns that are not, use a Row and give each child its own flex or width.

See also

  • Row - unequal columns
  • Table - columns with headers, priorities and rows

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.