@mui 等高网格项

Question

使用 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>
  );
}

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

Answer 1

请从方框向下使用此代码。您可以在 mui 网站 here.

上阅读有关如何使用网格项的更多信息

const Whosebug = () => {
  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>
  );
};

@mui 等高网格项

@mui grid items of equal height

css-grid

material-ui