Grid Edit
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
Grid
is a primitive layout component that can arrange content in a grid configuration.
Usage 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 Props
align
Type: CSS['alignItems']
Adjusts the block alignment of children.
alignment
Type: GridAlignment
Adjusts the horizontal and vertical alignment of children.
columns
Type: number
,(number
,null)[]
Adjusts the number of columns of the Grid
.
gap
Type: number
Gap between each child.
isInline
Type: boolean
Changes the CSS display from grid
to inline-grid
.
justify
Type: CSS['justifyContent']
Adjusts the inline alignment of children.
rows
Type: number
,(number
,null)[]
Adjusts the number of rows of the Grid
.
templateColumns
Type: CSS['gridTemplateColumns']
Adjusts the CSS grid template-columns
.
templateRows
Type: CSS['gridTemplateRows']
Adjusts the CSS grid template-rows
.