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