如何在React Grid中适配文本并保持盒子间距与数字位置统一

核心问题分析 #

你遇到的问题根源在于：

• 固定高度的容器导致长文本挤压数字区域，破坏垂直对齐
• 标签容器的固定高度限制文本换行，无法完全显示长内容
• 嵌套Grid的冗余结构，影响响应式布局灵活性

修改步骤及代码实现 #

以下是调整后的完整代码，关键修改点已标注：

import { Box, Grid, Paper, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";

const Contained = styled(Box)({
  backgroundColor: "rgba(241, 243, 246, 1)",
  fontFamily: "Roboto",
  minHeight: "100vh",
  width: "100vw"
});

// 改用auto-fit + minmax实现自适应响应式列，保证盒子间距和宽度
const ResponsiveGridBox = styled(Box)`
  display: grid;
  gap: 16px; // 明确设置盒子间距
  // Mobile Screen
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  // Tablet
  @media (min-width: 768px) {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  // Desktop
  @media (min-width: 1024px) {
    grid-template-columns: repeat(9, minmax(133px, 1fr));
  }
`;

// 移除固定height，改用min-height保证盒子最小高度，调整flex布局让数字区域固定上方
const Appbox = styled("div")({
  backgroundColor: "#fff",
  border: "1px solid #E4E9F2",
  borderRadius: "4px",
  color: "#64768C",
  display: "flex",
  flexDirection: "column",
  justifyContent: "flex-start", // 顶部对齐，确保数字位置统一
  alignItems: "center",
  padding: "16px",
  textAlign: "center",
  minHeight: "92px", // 保留最小高度避免盒子过矮
  "&:hover": {
    boxShadow: "0px 3px 6px #00000029"
  }
});

const StatsNumber = styled(Typography)({
  fontSize: "32px",
  fontWeight: 600,
  marginBottom: "8px" // 固定数字与标签的间距
});

// 移除固定height，让容器自适应文本高度
const LabelContainer = styled("div")({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexWrap: "wrap",
  whiteSpace: "normal",
  maxWidth: "100%",
  flexGrow: 1 // 占满剩余空间，保证盒子高度一致
});

const labels = [
  "Quotes",
  "Applications",
  "Identity Verified",
  "Underwriting Questions Submitted",
  "Consent",
  "Approved",
  "Policy Submitted",
  "Not Paid",
  "Policy Issued"
];

function ResponsiveGrid() {
  return (
    <Contained>
      <Typography
        align="left"
        variant="h1"
        sx={{ margin: "0px 32px 24px 32px", fontSize: "24px" }}
      >
        Dashboard
      </Typography>
      <Grid item xl={18} xs={8}>
        <Paper sx={{ padding: "32px", minHeight: "100%" }}>
          <ResponsiveGridBox>
            {labels.map((label) => (
              // 移除内层Grid item，简化结构
              <Appbox key={label}>
                <StatsNumber>33</StatsNumber>
                <LabelContainer>
                  <Typography>{label}</Typography>
                </LabelContainer>
              </Appbox>
            ))}
          </ResponsiveGridBox>
        </Paper>
      </Grid>
    </Contained>
  );
}

export default ResponsiveGrid;

关键修改说明 #

1. 响应式Grid布局优化：

   • 用repeat(auto-fit, minmax(xxx, 1fr))替代固定列数，自动适配屏幕宽度并换行
   • 明确设置gap:16px保证盒子间均匀间距

2. 盒子垂直对齐修复：

   • 把Appbox的justifyContent:center改为flex-start，让数字始终处于顶部位置
   • 给StatsNumber添加固定marginBottom，保证数字与标签的间距统一
   • 给LabelContainer添加flexGrow:1，让标签容器占满剩余空间，确保所有盒子高度一致

3. 文本显示优化：

   • 移除所有固定高度限制，让文本自由换行完全显示
   • 给Appbox设置minHeight，保持盒子的最小视觉高度

修改后既能保证长文本完全显示，又能让所有盒子的数字位置统一，同时保留响应式适配和盒子间距效果，匹配目标布局需求。

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