GridLegacy

Material Design 响应式布局网格会适应屏幕尺寸和方向，确保布局之间的一致性。

网格在布局之间创建视觉一致性，同时允许各种设计的灵活性。Material Design 的响应式 UI 基于 12 列网格布局。

工作原理

网格系统通过 GridLegacy 组件实现

它使用 CSS 的弹性盒子模块来实现高灵活性。
有两种类型的布局：容器和项目。
项目宽度以百分比设置，因此它们始终是流式的，并且尺寸相对于其父元素。
项目具有内边距，以在各个项目之间创建间距。
有五个网格断点：xs、sm、md、lg 和 xl。
可以为每个断点赋予整数值，指示当视口宽度满足断点约束时，组件占用 12 个可用列中的多少列。

如果您是 flexbox 新手或不熟悉 flexbox，我们建议您阅读这篇 CSS-Tricks flexbox 指南。

流式网格

流式网格使用可缩放和调整内容大小的列。流式网格的布局可以使用断点来确定布局是否需要进行重大更改。

基本网格

列宽度是介于 1 到 12 之间的整数值；它们适用于任何断点，并指示组件占用多少列。

传递给任何给定断点的值也适用于所有更宽的断点（如果它们没有显式定义的值）。例如，xs={12} 将组件的大小调整为占用其父容器的完整宽度，而与视口大小无关。

xs=8

xs=4

xs=8

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

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

按 Enter 开始编辑

具有多个断点的网格

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

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

xs=6 md=8

xs=6 md=4

xs=6 md=8

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

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

按 Enter 开始编辑

间距

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

行和列间距

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

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

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

按 Enter 开始编辑

响应式值

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

xs=2

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

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

按 Enter 开始编辑

以下属性支持响应式值：

columns
columnSpacing
direction
rowSpacing
spacing
MUI System 的所有其他属性

当使用响应式 columns 属性时，每个网格项目都需要其对应的断点。例如，这不起作用。网格项目缺少 md 的值

<Grid container columns={{ xs: 4, md: 12 }}>
  <Grid item xs={2} />
</Grid>

交互式

以下是一个交互式演示，可让您探索不同设置的视觉效果

单元格 1

单元格 2

单元格 3

<Grid
  container
  direction="row"
  sx={{
    justifyContent: "center",
    alignItems: "center",
  }}
>

自动布局

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

xs=6

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

可变宽度内容

将其中一个尺寸断点属性设置为 "auto" 而不是 true / number，以根据其内容的自然宽度调整列的大小。

可变宽度内容

xs=6

<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

复杂网格

以下演示不遵循 Material Design 指南，但说明了如何使用网格来构建复杂布局。

标准许可

全分辨率 1920x1080 • JPEG

ID: 1030114

移除

$19.00

嵌套网格

container 和 item 属性是两个独立的布尔值；它们可以组合在一起，以允许 Grid 组件既作为 flex 容器又作为子元素。

https://www.w3.org/TR/css-flexbox-1/#box-model

项目

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

按 Enter 开始编辑

⚠️ 为同时作为 flex 容器、flex 项目且具有间距的 Grid 元素定义显式宽度会导致意外行为，请避免这样做

<Grid spacing={1} container item xs={12}>

如果需要这样做，请删除其中一个属性。

列数

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

xs=8

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

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

按 Enter 开始编辑

局限性

负边距

项目之间的间距是通过负边距实现的。这可能会导致意外的行为。例如，要应用背景颜色，您需要将 display: flex; 应用于父元素。

white-space: nowrap

flex 项目的初始设置是 min-width: auto。当子元素使用 white-space: nowrap; 时，这会导致定位冲突。您可以使用以下代码重现此问题：

<Grid item xs>
  <Typography noWrap>

为了使项目保持在容器内，您需要设置 min-width: 0。在实践中，您可以设置 zeroMinWidth 属性

<Grid item xs zeroMinWidth>
  <Typography noWrap>

截断应有条件地应用于此长文本行，因为此行比容器可以支持的行长得多。

direction: column | column-reverse

在 direction="column" 和 direction="column-reverse" 容器中，不支持 xs、sm、md、lg 和 xl 属性。

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

CSS Grid 布局

GridLegacy 组件在内部使用 CSS flexbox。但是如下所示，您可以轻松使用 MUI System 和 CSS Grid 来布局您的页面。

xs=8

xs=4

xs=8

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>xs=8</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>xs=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>xs=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>xs=8</Item>
  </Box>
</Box>

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>xs=8</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>xs=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>xs=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>xs=8</Item>
  </Box>
</Box>

按 Enter 开始编辑

系统属性

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

<GridLegacy />