MUI Grid布局问题：如何让蓝色区块紧邻红色区块下方显示

完全可以实现这种布局。当前代码里红色、绿色、蓝色是三个独立的Grid item，绿色区块高度较高，导致蓝色区块被挤到了绿色区块的下方。调整方案是把红色和蓝色区块放在同一个左侧网格项中，内部用垂直布局的Grid容器堆叠它们：

修改后的代码如下：

import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";

export default function BasicList() {
  return (
    <Box>
      <Grid container>
        {/* 左侧列：包含红色和蓝色区块 */}
        <Grid item md={6}>
          <Grid container direction="column" spacing={2}>
            <Grid item>
              <Box style={{ backgroundColor: "red" }} height={200}>
                MD = 6 Height = 200
              </Box>
            </Grid>
            <Grid item>
              <Box style={{ backgroundColor: "blue" }} height={200}>
                MD = 6 Height = 200
              </Box>
            </Grid>
          </Grid>
        </Grid>
        {/* 右侧列：绿色区块 */}
        <Grid item md={6}>
          <Box style={{ backgroundColor: "green" }} height={600}>
            MD = 6 Height = 600
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

关键调整说明 #

• 将红色和蓝色区块包裹在同一个md={6}的Grid item中，确保它们都处于左侧列
• 内部新增一个direction="column"的Grid容器，让红色和蓝色区块垂直堆叠
• 右侧的绿色区块保持独立的md={6}Grid item，占据右侧整列高度

这样蓝色区块就会直接显示在红色区块的正下方，绿色区块在右侧完整展示。

内容的提问来源于stack exchange，提问作者Chetan Kondawle