云策 WordPress 开发者社区

块编辑器开发文档

Grid

查看官方原文 ↗
💡 云策文档标注

概述

Grid 是 WordPress 组件库中的一个实验性布局组件，用于以网格配置排列内容。它提供灵活的 CSS Grid 属性控制，但处于早期开发阶段，可能发生重大变更。

关键要点

  • Grid 是一个实验性组件，需从 '@wordpress/components' 导入 __experimentalGrid 使用。
  • 支持多种 Props 来调整网格布局，如 columns、rows、gap、align、justify 等。
  • 默认配置为 2 列和 3 的 gap，可通过 Props 自定义。

代码示例

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

注意事项

  • 此功能仍处于实验阶段，实现可能发生剧烈和破坏性变化，使用时需谨慎。
📄 原文内容
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