Grid
响应式布局网格可以适应屏幕尺寸和方向，确保布局之间的一致性。
Grid 组件非常适用于具有已知列数的布局。可以使用多个断点配置列，以指定每个子项的列跨度。
工作原理
网格系统通过 Grid 组件实现
- 它使用 CSS Flexbox（而不是 CSS Grid）来实现高灵活性。
- 网格始终是一个 flex 项目。使用
container属性添加一个 flex 容器。 - 项目宽度以百分比设置，因此它们始终是流动的，并且大小相对于其父元素。
- 有五个默认的网格断点：xs、sm、md、lg 和 xl。如果您需要自定义断点，请查看自定义断点网格。
- 您可以为每个断点提供整数值，以指示当视口宽度满足断点约束时，组件占用 12 个可用列中的多少列。
- 它使用
gapCSS 属性来添加项目之间的间距。 - 它不支持行跨越。子元素不能跨越多行。如果您需要此功能，我们建议使用 CSS Grid。
- 它不会自动放置子元素。它将尝试逐个适应子元素，如果空间不足，则其余子元素将从下一行开始，依此类推。如果您需要自动放置，我们建议改用 CSS Grid。
流式网格
流式网格使用可缩放和调整内容大小的列。流式网格的布局可以使用断点来确定布局是否需要发生显著变化。
基本网格
为了创建网格布局，您需要一个容器。使用 container 属性创建一个网格容器，该容器包装网格项目（Grid 始终是一个项目）。
列宽度是介于 1 和 12 之间的整数值。例如，size={6} 的项目占用网格容器宽度的一半。
多个断点
项目可以定义多个宽度，从而导致布局在定义的断点处发生变化。宽度值适用于所有更宽的断点，并且较大的断点会覆盖赋予较小断点的宽度值。
例如，当视口宽度小于 600 像素时，size={{ xs: 12, sm: 6 }} 的组件占用整个视口宽度。当视口超出此尺寸时，组件占用总宽度的一半——六列而不是 12 列。
间距
使用 spacing 属性来控制子元素之间的空间。间距值可以是任何正数（包括小数）或字符串。该属性使用 theme.spacing() 辅助函数转换为 CSS 属性。
以下演示说明了 spacing 属性的用法
<Grid container spacing={2}><Grid
container
direction="row"
sx={{
justifyContent: "center",
alignItems: "center",
}}
>自动布局
自动布局功能为所有存在的项目提供相等的空间。当您设置一个项目的宽度时，其他项目将自动调整大小以匹配它。
可变宽度内容
当断点的值给定为 "auto" 时，列的大小将自动调整以匹配其内容的宽度。下面的演示展示了其工作原理
嵌套网格
在另一个网格容器内呈现为直接子级的网格容器是一个嵌套网格，它从顶层继承其columns和spacing。如果顶层网格接收到这些属性，它也将继承顶层网格的属性。
继承间距
嵌套网格容器从其父容器继承行和列间距，除非为实例指定了 spacing 属性。
- 链接 1.1
- 链接 1.2
- 链接 1.3
- 链接 2.1
- 链接 2.2
- 链接 2.3
- 链接 3.1
- 链接 3.2
- 链接 3.3
- 链接 4.1
- 链接 4.2
- 链接 4.3
继承列
嵌套网格容器从其父容器继承列，除非为实例指定了 columns 属性。
列
使用 columns 属性更改网格中的默认列数 (12)，如下所示
偏移量
offset 属性将项目推送到网格的右侧。此属性接受
- 数字 - 例如，当视口大小等于或大于
md断点时，offset={{ md: 2 }}将项目向右推送两列。 "auto"- 这会将项目推送到网格容器的最右侧。
下面的演示说明了如何使用偏移量属性
自定义断点
如果您在主题中指定了自定义断点，则可以在响应式值中使用这些名称作为网格项目属性
import { ThemeProvider, createTheme } from '@mui/material/styles';
function Demo() {
return (
<ThemeProvider
theme={createTheme({
breakpoints: {
values: {
laptop: 1024,
tablet: 640,
mobile: 0,
desktop: 1280,
},
},
})}
>
<Grid container spacing={{ mobile: 1, tablet: 2, laptop: 3 }}>
{Array.from(Array(4)).map((_, index) => (
<Grid key={index} size={{ mobile: 6, tablet: 4, laptop: 3 }}>
<div>{index + 1}</div>
</Grid>
))}
</Grid>
</ThemeProvider>
);
}
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;
}
}
自定义
居中元素
要使网格项目的内容居中，请直接在项目上指定 display="flex"。然后使用 justifyContent 和/或 alignItems 来调整内容的位置，如下所示
局限性
列方向
不支持使用 direction="column" 或 direction="column-reverse"。Grid 组件专门用于将布局细分为列，而不是行。您不应单独使用 Grid 组件来垂直堆叠布局元素。相反，您应该在 Grid 内部使用 Stack 组件来创建垂直布局，如下所示