如何在Material UI v5的Grid组件中指定Grid item的起止列位置

实现方案 #

MUI v5 下有两种常用的实现方式：

方案1：使用默认Grid组件（flex布局实现）的offset属性

默认Grid基于flex布局，通过给item设置对应断点的offset属性即可控制起始位置，offset值表示当前item之前需要留白的列数，配合宽度属性即可实现指定起止列的效果。
以12列默认栅格为例，你要求的「第一个item位于第2到4列、第二个item位于第7到10列」的实现代码如下：

<Grid container rowSpacing={1}>
  {/* 前面空1列从第2列开始，占3列（2、3、4），对应起止2-4 */}
  <Grid item xs={3} xsOffset={1}>
    Item 1
  </Grid>
  {/* 前面空6列从第7列开始，占4列（7、8、9、10），对应起止7-10 */}
  <Grid item xs={4} xsOffset={6}>
    Item 2
  </Grid>
</Grid>

方案2：使用Grid2组件（原生CSS Grid实现）直接指定gridColumn

MUI v5 新增了基于原生CSS Grid实现的Grid2组件，支持直接透传CSS Grid相关属性，可以直接写原生的grid-column规则，更灵活不需要手动计算offset：

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

<Grid container rowSpacing={1} columns={12}>
  {/* 原生CSS规则：起始列2，结束列5（左闭右开，对应实际占2、3、4三列） */}
  <Grid item sx={{ gridColumn: '2 / 5' }}>
    Item 1
  </Grid>
  {/* 起始列7，结束列11，对应实际占7、8、9、10四列 */}
  <Grid item sx={{ gridColumn: '7 / 11' }}>
    Item 2
  </Grid>
</Grid>

注意事项 #

• MUI默认栅格列数为12，如果你自定义了全局栅格列数，需要对应调整offset和宽度、gridColumn的取值
• 如果使用方案1，不同断点可以单独设置对应offset，比如smOffset={2}表示在sm断点下留白2列

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