<Grid> 布局的简单干货

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>A</Grid>
  <Grid item xs={12} sm={6}>B</Grid>
</Grid>

<Grid container> 与 <Grid item xs={12} sm={6}> 是 MUI 的响应式栅格布局系统的核心部分，下面详细解释这段代码每一部分的含义。

---

✅ 基本概念

MUI 的 Grid 基于一个 12 列的网格系统，你可以按需指定一个元素占几列。

---

📦 <Grid container spacing={2}>

• container：表示这是一个 栅格容器，用于包裹一组 item。
• spacing={2}：表示子元素（item）之间的间距（padding） ，单位是 MUI 的 theme.spacing()，也就是 2 * 8px = 16px 的间距。

---

🧱 <Grid item xs={12} sm={6}>

• item：表示这是容器内的一个 栅格子项。

• xs={12}：

  • 表示在 超小屏幕（extra-small, <600px） 下，占满全部12列，即 一整行。

• sm={6}：

  • 表示在 小屏幕及以上（small, ≥600px） 下，占 6列，也就是半行（1/2） 。
  • 所以，两个 sm={6} 的项并排刚好满一行。

---

📊 示例效果说明

屏幕宽度	显示布局
小于 600px (xs)	每个子项占满 12 列（整行显示）
大于等于 600px (sm)	每个子项占 6 列（并排显示两个）

---

🧩 示例图解

如果你有这样的代码：

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>A</Grid>
  <Grid item xs={12} sm={6}>B</Grid>
</Grid>

• 手机上：

  A（独占一行）
  B（独占一行）
  

• 桌面上：

  A  B（并排各占一半）
  

---

🔁 总结

属性	代表含义	典型值示例
container	定义一个包含子元素的栅格容器	无
item	表示一个栅格子项	无
xs={n}	在超小屏幕下占用 n 列（0~12）	12
sm={n}	在小屏幕及以上占用 n 列	6
spacing={n}	子项之间的间距，n × 8px	2 = 16px

---

如果你想做到三列、四列布局，只需要改成：

<Grid item xs={12} sm={4}> // 三列布局
<Grid item xs={12} sm={3}> // 四列布局

---

✅ 下面是 一个自动响应的三列或四列例子

当然可以！下面是一个使用 MUI Grid 实现的 自动响应三列 / 四列布局示例：

✅ 实现目标

• 在手机端（小于 600px） ：每项占满一整行。
• 在平板端（600px 以上） ：每行显示三项。
• 在桌面端（960px 以上） ：每行显示四项。

---

💡 示例代码（使用 @mui/material/Grid）

import React from 'react';
import { Grid, Paper, Typography } from '@mui/material';

const ResponsiveGridExample = () => {
  return (
    <Grid container spacing={2}>
      {Array.from({ length: 8 }, (_, index) => (
        <Grid item xs={12} sm={4} md={3} key={index}>
          <Paper
            elevation={2}
            sx={{
              padding: 2,
              textAlign: 'center',
              height: 100,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Typography>Item {index + 1}</Typography>
          </Paper>
        </Grid>
      ))}
    </Grid>
  );
};

export default ResponsiveGridExample;

---

📐 栅格说明

属性	屏幕宽度区间	占列数	每行元素个数
xs=12	<600px（手机）	12	1 个
sm=4	≥600px（平板）	4	3 个（12/4）
md=3	≥900px（桌面）	3	4 个（12/3）

---

✅ 效果总结

• 📱 手机：一行一个
• 📟 平板：一行三个
• 💻 桌面：一行四个

---