Material-UI 网格项目高度

Question

Material-UI 网格项目高度

79

我有一行包含多个项目，希望所有项目的高度都与最高项目的高度相等，基本上我想要在这个网格中让所有项目具有相同的高度。

<Grid container layout={'row'} spacing={8}>
      <Grid item className={classes.section} xs={12} sm={12} md={4} lg={4} xl={4}>
        <div className={classes.teamMemberName}>
          {name}
        </div>
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <FirstTimeFillRate fillRate={firstTimeFillRate} />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <BackOrders
          backOrdersByItem={backOrdersByItem}
          backOrdersStoresWait={backOrdersStoresWait}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <OrderVolume orderVolume={orderVolume} />
      </Grid>

      <Grid item xs={12} sm={12} md={8} lg={8} xl={8} className={classes.section}>
        <Inventory inventory={inventory} />
      </Grid>
    </Grid>

这个段落的类名为section，背景颜色为灰色。我可以看到，在这个示例中，section元素没有继承行的高度：https://codesandbox.io/s/1826lw51z3

- user6388353

3个回答

16

我认为在网格容器中仅设置 {{alignItems="stretch"}} 就可以实现你想要的效果？(当方向为“row”时，它将使所有项目的高度等于容器的高度)。

- moilejter

2

stretch 是默认值。 - Jesse Novotny

3

不足够 - AlainIb

1

@AlainIb 这是有效的。你必须小心，因为网格项正在占用相同的高度。里面的卡片不是这样。 - T04435

1

@AlainIb 将“height: 100％”添加到paper类中，强制使所有三张卡片具有相同的高度。 - Simon1

1

当放置在中时，同一行中的所有都会自动具有相同的高度。只是Material UI使用了额外的包装器来创建间隙，就像Bootstrap在其flexbox网格系统中所做的那样。因此，一个更快的解决方案可以是将的所有子元素放在一个>中，并将其高度设置为100%。

示例代码：

<Grid container layout={'row'} spacing={8}>
                <Grid item xs={12} sm={12} md={4} lg={4} xl={4}>
                    <div style={{border: '1px solid', height: '100%'}}>
                        name
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={4} lg={4} xl={4} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={4} lg={4} xl={4} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, accusantium.
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={4} lg={4} xl={4} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam facilis tempore explicabo aperiam eveniet sit cumque dignissimos eius architecto quisquam.
                    </div>
                </Grid>

                <Grid item xs={12} sm={12} md={8} lg={8} xl={8} >
                    <div style={{border: '1px solid', height: '100%'}}>
                        name name
                    </div>
                </Grid>
            </Grid>

示例代码的结果 [1]: https://istack.dev59.com/uI6vr.webp

- Wakil Ahmed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Goncharenko · Accepted Answer

2022 更新（Material UI v5）：

Material UI v5 现在依赖于 CSS grid。请查看来自 MUI System 的官方文档https://mui.com/system/grid。

通过这种设置，您可以在容器 Box 元素上设置 display: "grid", gridTemplateColumns: "repeat(5, 1fr)"，以呈现具有相同宽度和高度的 5 个网格项。在此处查看具有固定和可变列数的示例：https://codesandbox.io/s/black-river-3i2ub?file=/src/GridDemo.tsx

// Fixed number of columns
const gridContainer = {
  display: "grid",
  gridTemplateColumns: "repeat(5, 1fr)"
};

// Variable number of columns
const gridContainer2 = {
  display: "grid",
  gridAutoColumns: "1fr",
  gridAutoFlow: "column"
};

const gridItem = {
  margin: "8px",
  border: "1px solid red"
};

export default function GridDemo() {
  return (
    <Box sx={gridContainer}>
      <Box sx={gridItem}>Item #1</Box>
      <Box sx={gridItem}>Item #2</Box>
      <Box sx={gridItem}>Item #3</Box>
      <Box sx={gridItem}>
        Item #4 has a long text inside. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Box>
      <Box sx={gridItem}>Item #5</Box>
    </Box>
  );
}

旧答案（Material UI v1）：

只需将height: 100％应用于网格项的子项即可。在您在沙盒中提供的代码中，将此属性添加到section类中：

const section = {
  height: "100%",
  paddingTop: 5,
  backgroundColor: "#fff"
};

请注意，您问题中的代码示例与沙盒中的不同，因此JSX应该如下所示：

<Grid item xs={12} md={4}>
  <div style={section}>component</div>
</Grid>

这是带有可工作演示的更新沙盒：https://codesandbox.io/s/m7r7jnzzlx（截至2022年1月10日不再编译）