使用Container导致Grid项目呈列而非行排列的解决方法咨询

核心原因 #

你当前的布局结构缺少Grid的container容器层，或者Container的样式干扰了Grid的默认行方向布局。Material UI的Grid需要container作为父容器来管理子item的排列逻辑，直接把item放在Container下时，Container作为块级元素会让每个item独占一行，最终呈现竖向排列的效果。

具体修复方案 #

1. 补充Grid容器层（最直接方案）

在Container内部添加带container属性的Grid组件，所有Griditem都嵌套在这个容器中：

<Container>
  <Grid container spacing={2}>
    <Grid item xs={4}>项目1</Grid>
    <Grid item xs={4}>项目2</Grid>
    <Grid item xs={4}>项目3</Grid>
  </Grid>
</Container>

container属性会让Grid启用flex布局，默认direction="row"，自动让子item横向排列。

2. 修正Container的自定义样式

如果给Container添加过flex-direction: column的自定义样式，会强制子元素竖向排列，需要移除或覆盖该样式：

<Container sx={{ flexDirection: "row" }}>
  <Grid container>
    <Grid item xs={6}>Item 1</Grid>
    <Grid item xs={6}>Item 2</Grid>
  </Grid>
</Container>

3. 调整布局层级（可选）

如果Container仅用于限制内容宽度，也可以将Container嵌套在Griditem内部，让Grid容器作为顶级布局：

<Grid container direction="row" spacing={2}>
  <Grid item xs={12}>
    <Container>
      {/* 这里放置需要限制宽度的内容 */}
    </Container>
  </Grid>
  <Grid item xs={6}>其他横向排列的项目</Grid>
</Container>

针对你案例的修复 #

你的项目问题出在直接将多个Griditem放在Container下，缺少外层的Gridcontainer。按照方案1补充容器层后，就能实现Grid项目横向排列的效果。

内容的提问来源于stack exchange，提问作者xAdvitya