网格版本 2
响应式布局网格会根据屏幕尺寸和方向进行调整，确保布局的一致性。
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} 的项目占用网格容器宽度的一半。
多个断点
项目可以定义多个宽度，从而导致布局在定义的断点处更改。宽度值适用于所有更宽的断点，并且较大的断点会覆盖给定给较小断点的值。
例如，具有 size={{ xs: 12, sm: 6 }} 的组件在视口 宽度小于 600 像素时占用整个视口宽度。当视口超出此大小时，组件占用总宽度的一半 — 六列而不是 12 列。
间距
使用 spacing 属性来控制子元素之间的空间。间距值可以是任何正数（包括小数）或字符串。该属性使用 theme.spacing() 辅助函数转换为 CSS 属性。
以下演示说明了 spacing 属性的使用
<Grid container spacing={2}><Grid
container
direction="row"
sx={{
justifyContent: "center",
alignItems: "center",
}}
>自动布局
自动布局功能为所有项目提供相等的空间。当您设置一个项目的宽度时，其他项目将自动调整大小以匹配它。
可变宽度内容
当断点的值给定为 "auto" 时，列的大小将自动调整以匹配其内容的宽度。下面的演示展示了它是如何工作的
嵌套网格
在另一个网格容器内呈现为直接子元素的网格容器是一个嵌套网格，它从顶层继承其columns和spacing。如果它接收到顶层网格的 props，它也将继承这些 props。
继承间距
嵌套网格容器从其父容器继承行和列间距，除非为实例指定了 spacing prop。
- 链接 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 prop。
列
使用 columns prop 更改网格中的默认列数 (12)，如下所示
偏移量
offset prop 将项目推到网格的右侧。此 prop 接受
- 数字—例如，
offset={{ md: 2 }}当视口大小等于或大于md断点时，将项目向右推两个列。 "auto"— 这会将项目推到网格容器的最右侧。
下面的演示说明如何使用偏移量 props
自定义断点
如果您在主题中指定自定义断点，则可以使用这些名称作为响应值的网格项目 props
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 来调整内容的位置，如下所示
