Material-UI Grid项目高度

Question

我有一个包含多个项目的行,我希望所有项目的高度等于最高项目的高度,我基本上希望所有项目与此网格的高度相同.

<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类的背景颜色为灰色,我可以看到这些部分没有继承行的高度,如此沙箱中所示:https://codesandbox.io/s/1826lw51z3

Answer 1

只需应用于height: 100%Grid项目的子项.在沙箱中提供的代码中,将此属性添加到节类:

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

Answer 2

我认为只需在 Grid 容器中设置 {{alignItems="stretch"}} 就能满足您的需求？（当 direction="row" 时，它使所有项目成为容器的高度）。