MUI：如何防止 Grid 项目进入下一行？答案

【问题标题】：MUI: How to prevent Grid items from going on next row?MUI：如何防止 Grid 项目进入下一行？
【发布时间】：2021-04-04 18:06:14
【问题描述】：

我在 ReactJs 中使用 MUI Grid 结构来显示 5 列，如下所示：

在较小的屏幕中，列移动到下一行。但在较小的屏幕中，我还希望所有列仅显示在一行中，并且可以通过水平滚动访问其他列。

<Grid
  container
  spacing={2}
  style={{
    maxHeight: "100vh",
    overflowY: "auto",
    overflowX: "hidden",
    height: "440px",
    overflow: "auto",
  }}
>
  <Grid item xs={2.1}>
    {cards.map((card) => <Card props={card} /> )}
  </Grid>
</Grid>

【问题讨论】：

标签： css reactjs material-ui grid

【解决方案1】：

因为 Grid uses flexbox 在幕后。您可以在您的Grid 容器中简单地将wrap 值设置为nowrap，您可以看到Grid 组件here 的完整API。

<Grid
  container
  wrap="nowrap" // --> add this line to disable wrap
  sx={{ overflow: "auto" }} // --> add scrollbar when the content inside is overflowed
  spacing={8}
>
  {...}
</Grid>

现场演示

【讨论】：

这就是我想要的。非常感谢！

【解决方案2】：

网格基于 12 列网格布局。因此 xs 只接受以下值：

'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12.

我建议您在开头和结尾放置一个 xs 大小等于 1 的空网格。这使 xs 的总大小等于 12。

          <Grid
            container
            spacing={2}
            style={{
              maxHeight: "100vh",
              overflowY: "auto",
              overflowX: "hidden",
              height: "440px",
              overflow: "auto",
            }}
          >
               <Grid item xs={1}/>
                 {cards.map((card) => (
                   <Grid item xs={2}>
                     <Card props={card} />
                   </Grid>
                  ))}
               <Grid item xs={1}/>
          </Grid>

【讨论】：

其实。它适用于笔记本电脑/电脑屏幕。但在小屏幕中，该列正在下一行移动。我必须防止这种情况。我还想要小屏幕中一行中的所有列，以便我可以水平滚动以查看其他列
如果我理解正确，您正在寻找这样的东西：https://material-ui.com/components/grid-list/#single-line-grid-list?