React MUI 两个各占50%宽度的相邻Grid区块高度匹配实现问题

实现方案 #

你只需要做几处样式调整即可实现左右区块等高，左侧卡片自动填充高度的效果：

1. 给外层Grid container添加alignItems="stretch"属性，触发flex布局下的子项自动撑满容器高度的特性，两个并列的Grid item会自动与最高的子项高度对齐。
2. 左右两侧Grid item内的外层Box、内层Grid容器都添加height: 100%的样式，让内部容器先占满外层分配的全高。
3. 所有Card组件都添加height: 100%的样式，让卡片自动填充所在网格项的高度。

调整完成后，右侧图表区块的高度会作为父容器的基准高度，左侧区块自动适配等高，内部的卡片也会自动填充分配到的空间，不会出现底部留白。

修改后完整代码 #

import React from "react";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Chart from "./testChart.js";

function GeneralDashboard(props) {
  const defaultStats = [
    { name: "Opportunitys Entered", value: 102 },
    { name: "Wins Reported", value: 23 },
    { name: "Win Rate", value: "60%" },
    { name: "Total Revenue", value: "$20m" },
  ];
  return (
    <Box sx={{ flexGrow: 1 }}>
      {/* 外层Grid添加alignItems="stretch" */}
      <Grid
        container
        spacing={{ xs: 1, sm: 2, lg: 2 }}
        columns={{ xs: 8, sm: 8, md: 8, lg: 8 }}
        alignItems="stretch"
      >
        <Grid item xs={8} sm={8} md={4} lg={4}>
          {/* Box添加height: 100% */}
          <Box sx={{ flexGrow: 1, height: "100%" }}>
            {/* 内层Grid添加height: 100% */}
            <Grid
              container
              spacing={{ xs: 1, sm: 2, lg: 2 }}
              columns={{ xs: 4, sm: 4, md: 8, lg: 8 }}
              sx={{ height: "100%" }}
            >
              {defaultStats.map((stat) => {
                return (
                  <Grid item xs={2} sm={4} md={4} key={stat.name}>
                    {/* Card添加height: 100% */}
                    <Card sx={{ height: "100%" }}>
                      <CardContent>
                        <Typography
                          sx={{ fontSize: 14 }}
                          color="text.secondary"
                          gutterBottom
                        >
                          {stat.name}
                        </Typography>
                        <Typography variant="h3" component="div">
                          {stat.value}
                        </Typography>
                      </CardContent>
                    </Card>
                  </Grid>
                );
              })}
            </Grid>
          </Box>
        </Grid>
        <Grid item xs={8} sm={8} md={4} lg={4}>
          {/* Box添加height: 100% */}
          <Box sx={{ flexGrow: 1, height: "100%" }}>
            {/* 内层Grid添加height: 100% */}
            <Grid container spacing={{ xs: 1, sm: 1, lg: 1 }} sx={{ height: "100%" }}>
              <Grid item xs={12}>
                {/* Card添加height: 100% */}
                <Card sx={{ height: "100%" }}>
                  <CardContent>
                    <Typography
                      sx={{ fontSize: 14 }}
                      color="text.secondary"
                      gutterBottom
                    >
                      <h5>
                        <span>
                          <span className="fw-semi-bold">Re-entry</span>{" "}
                          timing by industry
                        </span>
                      </h5>
                    </Typography>
                    <Chart />
                  </CardContent>
                </Card>
              </Grid>
            </Grid>
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

原布局效果参考 #

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