Grid

Grid is a primitive layout component that can arrange content in a grid configuration.

Usage

import { __experimentalGrid as Grid, __experimentalText as Text, } from '@wordpress/components'; function Example() { return ( <Grid columns={ 3 }> <Text>Code</Text> <Text>is</Text> <Text>Poetry</Text> </Grid> ); } 

Props

align: CSS[‘alignItems’]

Adjusts the block alignment of children.

• Required: No

alignment: GridAlignment

Adjusts the horizontal and vertical alignment of children.

• Required: No

columnGap: CSSProperties[‘gridColumnGap’]

Adjusts the grid-column-gap.

• Required: No

columns: number

Adjusts the number of columns of the Grid.

• Required: No
• Default: 2

gap: number

Gap between each child.

• Required: No
• Default: 3

isInline: boolean

Changes the CSS display from grid to inline-grid.

• Required: No

justify: CSS[‘justifyContent’]

Adjusts the inline alignment of children.

• Required: No

rowGap: CSSProperties[‘gridRowGap’]

Adjusts the grid-row-gap.

• Required: No

rows: number

Adjusts the number of rows of the Grid.

• Required: No

templateColumns: CSS[‘gridTemplateColumns’]

Adjusts the CSS grid template-columns.

• Required: No

templateRows: CSS[‘gridTemplateRows’]

Adjusts the CSS grid template-rows.

• Required: No