@wordpress/components
Version:
UI components for WordPress.
76 lines (43 loc) • 1.16 kB
Markdown
# Grid (Experimental)
`Grid` is a primitive layout component that can arrange content in a grid configuration.
## Usage
```jsx
import { Grid, View } from '@wordpress/components/ui';
function Example() {
return (
<Grid columns={ 3 }>
<View>Code</View>
<View>is</View>
<View>Poetry</View>
</Grid>
);
}
```
## 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`.