使用Material UI Grid且方向='column'和flexWrap='wrap'时列宽不一致

Question

总的来说，我对 React 和前端还很陌生。我正在尝试设置一个 MUI 网格，它列出一列中的项目，直到它环绕以开始一个新列。到目前为止，一切顺利，我可以通过设置 Direction 和 flexWrap 属性来实现这一点。

现在我面临的问题是其中一个项目是嵌套的网格容器，并且该项目所在的列比其他项目更宽。

从 MUI 文档或其他任何地方，一旦方向设置为“列”，我就找不到调整列宽的方法。

有人知道如何实现所有列的宽度相同吗？我将举一个例子：

import React from "react";
import ReactDOM from "react-dom";
import { Box, styled } from "@mui/material";
import Grid from "@mui/material/Grid2";

const FormField = styled(Box)(({ theme }) => ({
  marginBottom: theme.spacing(1.5),
  borderRadius: 1,
  minHeight: "200px",
  backgroundColor: "yellowgreen",
}));

const newGrid = (
  <div>
    <Grid
      container
      spacing={2}
      direction={"column"}
      flexWrap={"wrap"}
      maxHeight={"75vh"}
    >
      <Grid>
        <FormField>Item 1</FormField>
      </Grid>
      <Grid>
        <FormField>Item 2</FormField>
      </Grid>
      <Grid>
        <FormField>Item 3</FormField>
      </Grid>
      <Grid>
        <FormField>Item 4</FormField>
      </Grid>
      <Grid>
        <FormField>Item 5</FormField>
      </Grid>
      <Grid container spacing={2}>
        <Grid size={2}>
          <FormField>Nest 1</FormField>
        </Grid>
        <Grid size={5}>
          <FormField>Nest 2</FormField>
        </Grid>
        <Grid size={5}>
          <FormField>Nest 3</FormField>
        </Grid>
      </Grid>
      <Grid>
        <FormField>Item 6</FormField>
      </Grid>
      <Grid>
        <FormField>Item 7</FormField>
      </Grid>
    </Grid>
  </div>
);

function App() {
  return newGrid;
}

ReactDOM.render(<App />, document.querySelector("#app"));

根据窗口大小，结果如下： 列不均匀的网格 如何使列的宽度相同？

我尝试了不同的道具，如 AlignItems 或 JustifyContent，但在使用 Direction='column' 时几乎没有效果。我尝试了已弃用的 Grid（与 Grid 2 相比），但问题是一样的。我期望相同宽度的列，但如果有嵌套的网格容器，该列会更宽。在较小的屏幕上更明显。

Answer 1

就像将

size

放在嵌套网格元素上一样，您需要将

size

添加到常规网格元素中。 MUI 网格默认具有 12 个隐藏的列空间，因此如果您将每个项目变成

size={6}

，它们都会占据宽度的一半。这是我的代码框示例： Mui 网格列解决方案。将尺寸附加到每个网格项目还可以让您删除

maxHeight

，因为它们现在只占用一行。 只需确保每行的大小<= 12 unless you manually state otherwise.

一个可能甚至更好的解决方案是制作这样的网格：Mui Grid Row Solution。这允许您选择某些列是否需要更宽。尽管它确实以一种简单的模式打破了简单的 1-8 流程，但我认为动态选择宽度的能力要好得多。即使您有一个项目列表，例如：[项目 0、项目 1、项目 2、项目 3、项目 4、项目 5、项目 6、项目 7]，您应该能够执行一些基本的数组操作来显示就这样的布局。