如何禁用窗口宽度小于600px时MUI Grid组件的元素堆叠效果

原因说明 #

MUI Grid 默认的xs断点覆盖<600px的窗口宽度，如果你没有显式给Grid子项配置xs下的占宽，组件会默认给所有子项设置xs={12}（占满整行宽度），因此两个子项会自动上下堆叠。

解决方法 #

方法1：显式配置xs断点占宽（推荐） #

直接给两个需要并排的Grid子项设置xs断点的占列数，比如要保持两个始终均分宽度，就各设xs={6}，两个加起来刚好占满12列的栅格系统，不会换行堆叠，示例代码如下：

import Grid from '@mui/material/Grid';

function Layout() {
  return (
    <Grid container spacing={2}>
      {/* 第一个并排元素 */}
      <Grid item xs={6} sm={6}>
        左侧内容
      </Grid>
      {/* 第二个并排元素 */}
      <Grid item xs={6} sm={6}>
        右侧内容
      </Grid>
      {/* 下方独立元素 */}
      <Grid item xs={12}>
        底部内容
      </Grid>
    </Grid>
  );
}

你可以根据自己的布局需求调整xs的占比，比如左3右9就设xs={3}和xs={9}，只要两个加起来不超过12就不会堆叠。

方法2：强制容器不换行 #

如果你不需要栅格比例适配，只是要两个元素始终横向排列，可直接给Grid容器设置不换行：

• 给Grid container添加flexWrap="nowrap"属性，强制子项不换行
• 给两个并排子项添加flexGrow: 1的样式，保证两个元素均分宽度
  如果担心小屏宽度不够内容被压缩，可以额外给容器设置minWidth: 600px，小于600px时会自动出现横向滚动条，不会挤压内容。

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