Skip to Content
Documentation
Saas UI
Saas UI Pro
Starter kits
Get Pro
Getting started
Components
Overview
Forms
Overview
Fields
Styling
Style props
Background
Border
Display
Divide
Effects
Filters
Flex and Grid
Interactivity
Layout
List
Sizing
Spacing
SVG
Tables
Transforms
Transitions
Typography
Theming

Flex and Grid

JSX style props to control flex and grid layouts

Flex Basis

Use the flexBasis prop to set the initial main size of a flex item.

<Flex>
  <Box flexBasis="25%" />
  <Box flexBasis="25%" />
  <Box flexBasis="50%" />
</Flex>
PropCSS PropertyToken Category
flexBasisflex-basis-

Flex Direction

Use the flexDir or flexDirection prop to set the direction of the main axis in a flex container.

<Box display="flex" flexDirection="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

When using Flex component, the direction prop is aliased to flexDirection.

<Flex direction="column">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
PropCSS PropertyToken Category
flexDir, flexDirectionflex-direction-

Flex Wrap

Use the flexWrap prop to set whether flex items are forced onto one line or can wrap onto multiple lines.

<Box display="flex" flexWrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

When using Flex component, the wrap prop is aliased to flexWrap.

<Flex wrap="wrap">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
PropCSS PropertyToken Category
flexWrapflex-wrap-

Flex

Use the flex prop to define the flexibility of a flex container or item.

<Flex>
  <Box flex="1" />
  <Box />
</Flex>
PropCSS PropertyToken Category
flexflex-

Flex Grow

Use the flexGrow prop to set the flex grow factor of a flex item.

<Flex>
  <Box flexGrow="0" />
  <Box flexGrow="1" />
</Flex>
PropCSS PropertyToken Category
flexGrowflex-grow-

Flex Shrink

Use the flexShrink prop to set the flex shrink factor of a flex item.

<Flex>
  <Box flexShrink="0" />
  <Box flexShrink="1" />
</Flex>
PropCSS PropertyToken Category
flexShrinkflex-shrink-

Order

Use the order prop to set the order of a flex item.

<Flex>
  <Box order="0" />
  <Box order="1" />
</Flex>
PropCSS PropertyToken Category
orderorder-

Gap

Use the gap prop to set the gap between items in a flex or grid container.

<Flex gap="4">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
PropCSS PropertyToken Category
gapgapspacing

Grid Template Columns

Use the gridTemplateColumns prop to define the columns of a grid container.

<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

When using Grid component, the templateColumns prop is aliased to gridTemplateColumns.

<Grid templateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

Grid Template Start/End

Use the gridTemplateStart and gridTemplateEnd props to define the start and end of a grid container.

<Box display="grid" gridTemplateColumns="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box gridColumn="span 2 / span 2">Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
gridTemplateStartgrid-template-start-
gridTemplateEndgrid-template-end-

Grid Template Rows

Use the gridTemplateRows prop to define the rows of a grid container.

<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
gridTemplateRowsgrid-template-rows-

Grid Row Start/End

Use the gridRowStart and gridRowEnd props to define the start and end of a grid item.

<Box display="grid" gap="4" gridTemplateRows="repeat(3, minmax(0, 1fr))">
  <Box gridRowStart="1" gridRowEnd="3">
    Item 1
  </Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
gridRowStartgrid-row-start-
gridRowEndgrid-row-end-

Grid Autoflow

Use the gridAutoFlow prop to define how auto-placed items get flowed into the grid.

<Box display="grid" gridAutoFlow="row">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
gridAutoFlowgrid-auto-flow-

Grid Auto Columns

Use the gridAutoColumns prop to specify the size of the grid columns that were created without an explicit size.

<Box display="grid" gridAutoColumns="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
gridAutoColumnsgrid-auto-columns-

Grid Auto Rows

Use the gridAutoRows prop to specify the size of the grid rows that were created without an explicit size.

<Box display="grid" gridTemplateRows="200px" gridAutoRows="120px">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
gridAutoRowsgrid-auto-rows-

Justify Content

Use the justifyContent prop to align items along the main axis of a flex container.

<Box display="flex" justifyContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

When using the Flex component, the justify prop is aliased to justifyContent.

<Flex justify="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
PropCSS PropertyToken Category
justifyContentjustify-content-

Justify Items

Use the justifyItems prop to control the alignment of grid items within their scope.

<Box display="grid" justifyItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
justifyItemsjustify-items-

Align Content

Use the alignContent prop to align rows of content along the cross axis of a flex container when there's extra space.

<Box display="flex" alignContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

When using the Flex component, the align prop is aliased to alignContent.

<Flex align="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
PropCSS PropertyToken Category
alignContentalign-content-

Align Items

Use the alignItems prop to control the alignment of grid items within their scope.

<Box display="grid" alignItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

Align Self

Use the alignSelf prop to control the alignment of a grid item within its scope.

<Box display="grid">
  <Box alignSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
alignSelfalign-self-

Place Content

Use the placeContent prop to align content along both the block and inline directions at once. It works like justifyContent and alignContent combined, and can be used in flex and grid containers.

<Flex placeContent="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Flex>
PropCSS PropertyToken Category
placeContentplace-content-

Place Items

Use the placeItems prop to align items along both the block and inline directions at once. It works like justifyItems and alignItems combined, and can be used in flex and grid containers.

<Box display="grid" placeItems="center">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
placeItemsplace-items-

Place Self

Use the placeSelf prop to align a grid item along both the block and inline directions at once.

<Box display="grid">
  <Box placeSelf="center">Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>
PropCSS PropertyToken Category
placeSelfplace-self-

Previous

Filters

Next

Interactivity