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