@mui 等高网格项目答案

【问题标题】：@mui grid items of equal height@mui 等高网格项目
【发布时间】：2022-06-20 03:38:26
【问题描述】：

使用 React @mui 包，我想创建一个项目网格，所有项目都拉伸到与最高项目相同的高度。我尝试搜索类似的问题，但没有找到可行的解决方案，并使用@mui v5。这是我的示例，也可以在 Sandbox https://codesandbox.io/s/happy-moon-y5lugj?file=/src/App.js 上找到。我更喜欢使用 @mui 组件而不是直接使用网格 css 的解决方案（如果可能）。我也无法修复列数，它需要响应。

import * as React from "react";
import {
  Box,
  Card,
  Container,
  Grid,
  Paper,
  Table,
  TableBody,
  TableRow,
  TableCell,
  Typography
} from "@mui/material";

export default function App() {
  const createTable = (rows) => {
    return (
      <Table>
        <TableBody>
          {[...Array(rows).keys()].map((n) => {
            return (
              <TableRow key={n}>
                <TableCell>Aaaaa</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    );
  };

  return (
    <Box p={3}>
      <Container maxWidth="sm" height="100%">
        <Grid container spacing={2} height="100%">
          <Grid item height="100%">
            <Paper height="100%" elevation={3} sx={{ p: 3 }}>
              <Typography variant="h4">Something</Typography>
              {createTable(5)}
            </Paper>
          </Grid>
          <Grid item height="100%">
            <Paper height="100%" elevation={3} sx={{ p: 3 }}>
              <Typography variant="h4">More things</Typography>
              {createTable(3)}
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
}

这就是我现在得到的。我希望将较短的项目填充在底部，使其与第一个项目的高度相同。

【问题讨论】：

标签： material-ui css-grid

【解决方案1】：

请从方框下方使用此代码。您可以在 mui 网站here 上阅读有关如何使用网格项的更多信息。

const StackOverflow = () => {
  const createTable = (rows) => {
    return (
      <Table>
        <TableBody>
          {[...Array(rows).keys()].map((n) => {
            return (
              <TableRow key={n}>
                <TableCell>Aaaaa</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    );
  };
  return (
    <Box p={3}>
      <Container maxWidth="sm">
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
              <Typography variant="h4">Something</Typography>
              {createTable(5)}
            </Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
              <Typography variant="h4">More things</Typography>
              {createTable(3)}
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};

【讨论】：

【解决方案2】：

对我有用的是在 Papers sx 道具中使用以下内容：

{{height: "100%", display: "flex", alignItems: "center"}}

【讨论】：