网格

此功能仍处于实验阶段。“Experimental”表示这是早期实现，可能会发生剧烈且破坏性的更改。

Grid 是一个基础布局组件，可以按网格配置排列内容。

用法

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>
    );
}

属性

align: CSS[‘alignItems’]

调整子元素的块对齐方式。

• 必需：否

alignment: GridAlignment

调整子元素的水平和垂直对齐方式。

• 必需：否

columnGap: CSSProperties[‘gridColumnGap’]

调整 grid-column-gap。

• 必需：否

columns: number

调整 Grid 的列数。

• 必需：否
• 默认值：2

gap: number

每个子元素之间的间距。

• 必需：否
• 默认值：3

isInline: boolean

将 CSS display 从 grid 更改为 inline-grid。

• 必需：否

justify: CSS[‘justifyContent’]

调整子元素的行内对齐方式。

• 必需：否

rowGap: CSSProperties[‘gridRowGap’]

调整 grid-row-gap。

• 必需：否

rows: number

调整 Grid 的行数。

• 必需：否

templateColumns: CSS[‘gridTemplateColumns’]

调整 CSS grid template-columns。

• 必需：否

templateRows: CSS[‘gridTemplateRows’]

调整 CSS grid template-rows。

• 必需：否