如何为Material UI Grid实现动态列宽？适配同一容器不同网格项数量

当然可以在同一Grid容器内实现网格项列宽的动态变化，让它们有时2个一行、有时4个一行，且每行的网格项保持相同宽度。核心思路是通过动态计算xs属性值来实现——Material UI的Grid基于12列布局系统，只要根据当前需要展示的列数，用12除以列数就能得到每个网格项的xs值。

实现步骤示例 #

• 用状态控制当前要展示的列数（比如2或4）
• 动态计算每个网格项的xs值：12 / 列数
• 在Grid容器中渲染对应数量的网格项，统一使用计算后的xs值

具体代码实现 #

import { useState } from 'react';
import { Grid, Button, Paper, Typography } from '@mui/material';

export default function DynamicGrid() {
  // 状态控制当前列数，默认4列
  const [columnCount, setColumnCount] = useState(4);

  // 切换列数的方法
  const toggleColumns = () => {
    setColumnCount(prev => prev === 4 ? 2 : 4);
  };

  // 计算每个网格项的xs值
  const itemWidth = 12 / columnCount;

  // 模拟网格项数据
  const items = Array.from({ length: columnCount }, (_, index) => `项目 ${index + 1}`);

  return (
    <div>
      <Button onClick={toggleColumns} variant="contained" sx={{ mb: 2 }}>
        切换为{columnCount === 4 ? '2' : '4'}列布局
      </Button>
      <Grid container spacing={2}>
        {items.map((item, index) => (
          <Grid item xs={itemWidth} key={index}>
            <Paper sx={{ p: 2, textAlign: 'center' }}>
              <Typography>{item}</Typography>
            </Paper>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

关键说明 #

• columnCount状态控制当前每行展示的网格项数量，点击按钮可在2和4之间切换
• itemWidth通过12 / columnCount计算得出，确保每行的网格项总宽度刚好占满12列，从而保持相同宽度
• Grid容器的spacing属性用于设置网格项之间的间距，可根据需求调整

这种方式既保证了同一行的网格项宽度一致，又能灵活切换布局列数，完全符合需求。

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