Grid

响应式布局栅格会适应屏幕尺寸和方向，确保跨布局的一致性。

Grid 组件非常适合具有已知列数的布局。列数可以在多个断点中配置，您必须在这些断点中指定每个子元素的列跨度。

工作原理

栅格系统通过 Grid 组件实现

它使用 CSS 的弹性盒子模块，具有高度的灵活性。
栅格始终是一个 flex 项目。使用 container 属性向其添加 flex 容器。
项目宽度以百分比设置，因此它们始终是流式的，并且大小相对于其父元素。
有五个默认的栅格断点：xs、sm、md、lg 和 xl。如果您需要自定义断点，请查看自定义断点栅格。
可以为每个断点指定整数值，指示当视口宽度满足断点约束时，组件占用 12 个可用列中的多少列。
它不具有行的概念。这意味着，您无法使子元素跨越多行。如果您需要这样做，我们建议使用 CSS Grid 代替。
它不提供自动放置子元素功能。它会尝试逐个放置子元素，如果空间不足，其余子元素将从下一行开始，依此类推。如果您需要自动放置功能，我们建议使用 CSS Grid 代替。

流式栅格

流式栅格使用可缩放和调整内容大小的列。流式栅格的布局可以使用断点来确定布局是否需要发生重大变化。

基本栅格

为了创建栅格布局，您需要一个容器。使用 container 属性创建包裹栅格项目（Grid 始终是一个项目）的栅格容器。

列宽是介于 1 和 12 之间的整数值。例如，size={6} 的项目占用栅格容器宽度的一半。

size=8

size=4

size=8

<Grid container spacing={2}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

多个断点

组件可以定义多个宽度，从而导致布局在定义的断点处发生变化。赋予较大断点的值会覆盖赋予较小断点的值。

例如，当视口宽度为600 像素或更大时，size={{ xs: 12, sm: 6 }} 将组件的大小调整为占用视口宽度的一半（6 列）。对于较小的视口，组件将填充所有 12 个可用列。

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

间距

要控制子元素之间的空间，请使用 spacing 属性。间距值可以是任何正数，包括小数和任何字符串。该属性使用 theme.spacing() 辅助函数转换为 CSS 属性。

行和列间距

rowSpacing 和 columnSpacing 属性允许独立指定行和列间隙。它类似于 CSS Grid 的 row-gap 和 column-gap 属性。

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid size={6}>
    <Item>1</Item>
  </Grid>
  <Grid size={6}>
    <Item>2</Item>
  </Grid>
  <Grid size={6}>
    <Item>3</Item>
  </Grid>
  <Grid size={6}>
    <Item>4</Item>
  </Grid>
</Grid>

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid size={6}>
    <Item>1</Item>
  </Grid>
  <Grid size={6}>
    <Item>2</Item>
  </Grid>
  <Grid size={6}>
    <Item>3</Item>
  </Grid>
  <Grid size={6}>
    <Item>4</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

响应式值

您可以根据活动断点切换属性的值。例如，我们可以实现 Material Design 的推荐的响应式布局栅格。

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid key={index} size={{ xs: 2, sm: 4 }}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid key={index} size={{ xs: 2, sm: 4 }}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

按 Enter 开始编辑

以下属性支持响应式值

size
columns
columnSpacing
direction
rowSpacing
间距
offset
MUI 系统的所有其他属性

自动布局

自动布局使项目公平地共享可用空间。这也意味着您可以设置一个项目的宽度，其他项目将自动调整大小以适应它。

size=grow

size=6

size=grow

<Grid container spacing={3}>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

可变宽度内容

将 size 断点属性之一设置为 "auto"，以根据其内容的宽度调整列的大小。

size=auto

size=6

size=grow

<Grid container spacing={3}>
  <Grid size="auto">
    <Item>size=auto</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid size="auto">
    <Item>size=auto</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

嵌套栅格

在另一个栅格容器内渲染的栅格容器是一个嵌套栅格，它继承了顶部的columns 和 spacing。深度嵌套的栅格将从上层嵌套栅格继承属性，如果它接收到这些属性。

电子邮件订阅部分

类别 A

链接 1.1
链接 1.2
链接 1.3

类别 B

链接 2.1
链接 2.2
链接 2.3

类别 C

链接 3.1
链接 3.2
链接 3.3

类别 D

链接 4.1
链接 4.2
链接 4.3

链接 A

链接 B

链接 C

列数

您可以使用 columns 属性更改默认列数 (12)。

size=8

<Grid container spacing={2} columns={16}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} columns={16}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

偏移量

使用 offset 属性将项目向右移动，该属性可以是

数字，例如，offset={{ md: 2 }} - 使用时，项目从 md 断点开始并向上移动 2 列。
"auto" - 使用时，项目移动到栅格容器的右边缘。

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
    <Item>1</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
    <Item>2</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
    <Item>3</Item>
  </Grid>
  <Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
    <Item>4</Item>
  </Grid>
</Grid>

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
    <Item>1</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
    <Item>2</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
    <Item>3</Item>
  </Grid>
  <Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
    <Item>4</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

自定义断点

如果您为主题指定了自定义断点，则可以在响应式值中使用这些名称作为栅格项目属性。

TypeScript

您必须在主题断点接口上设置模块增强。

declare module '@mui/system' {
  interface BreakpointOverrides {
    // Your custom breakpoints
    laptop: true;
    tablet: true;
    mobile: true;
    desktop: true;
    // Remove default breakpoints
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
  }
}

限制

direction column 和 column-reverse

在 direction="column" 和 direction="column-reverse" 容器中不支持 size 和 offset 属性。

它们定义了组件在给定断点将使用的栅格数。它们旨在在 row 容器中使用 flex-basis 控制宽度，但它们会影响 column 容器中的高度。如果使用这些属性，可能会对 Grid 项目元素的高度产生不良影响。