网格

就绪

Storybook

可用版本 v10.2.3 及以上

概览

Grid 组件是一个布局组件，允许您创建列和行的网格来组织内容和元素。它是 CSS Grid 规范的一个包装器。

使用时机

当您想要创建结构化和有组织的布局，并且内容或元素需要按行和列对齐以提高清晰度和一致性时，请使用 Grid 组件。

不使用时机

在以下使用场景中，请改用 Stack 组件

• 对齐：更多项对齐选项。
• Flex 项：自定义 flex basis 或配置项如何拉伸和换行。

属性

定义 Grid 有两种方式，一种是按列数，另一种是按最小列宽。

注意：不支持同时使用 columns 和 minColumnWidth 属性。正确的使用方式是仅使用其中一个，而不是两者同时使用。

列数

columns 属性定义了网格的列数。列宽将相等。您可以使用的属性包括

• columns，可能的值：1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
• gap，可能的值：ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)

加载中...

在线编辑器

<Grid columns={4} gap={2}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</Grid>

最小列宽

minColumnWidth 属性定义了每列可以拥有的最小宽度，列数将由可用空间决定。您可以使用的属性包括

• minColumnWidth，可能的值：1 | 2 | 3 | 5 | 8 | 13 | 21 | 34 | 44 | 55 | 72 | 89 | 144，其中数字将乘以网格大小。
• gap，可能的值：ThemeSpacingTokens (0 | 0.25 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10)

加载中...

在线编辑器

<Grid minColumnWidth={13} gap={2}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</Grid>

响应性

上述所有属性都可以通过响应式方式定义，这意味着将根据窗口大小设置不同的值。

要以响应式方式定义其中任何一个属性，只需传入一个以响应式断点作为键的对象即可。例如，不是以 columns={4} 的方式定义 columns 属性，而是定义为 columns={{ xs: 1, md: 4 }}。这意味着从 xs 断点开始，列数为 1，而从 md 断点开始，列数为 4。

主题中可能的断点可以在此处找到。

延伸阅读与资源

• Storybook 文档和属性表

演练场