React Material-UI卡片Grid布局实现：如何设置一行展示3张卡片

你当前卡片逐个排列大概率是漏加了Grid的container/item属性，或者没有正确配置栅格占比。MUI默认使用12列栅格系统，一行3张卡片只需保证单张卡片占4列即可。

方案1：使用MUI v5+ 推荐的Grid2组件 #

导入依赖：
import { Grid2, Card, CardContent, Typography } from '@mui/material';

完整组件代码：

const ThreeColumnCardGrid = () => {
  // 模拟卡片数据，可替换为实际业务数据
  const cardData = Array.from({length: 9}, (_, index) => ({
    id: index,
    title: `卡片${index + 1}`,
    desc: '卡片内容示例'
  }))

  return (
    <Grid2 container spacing={3}>
      {cardData.map(card => (
        <Grid2 key={card.id} size={{xs: 12, sm: 6, md: 4}}>
          <Card sx={{ height: '100%' }}>
            <CardContent>
              <Typography variant="h6" component="h3">
                {card.title}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {card.desc}
              </Typography>
            </CardContent>
          </Card>
        </Grid2>
      ))}
    </Grid2>
  )
}

参数说明 #

• container：声明当前Grid为栅格容器，必填，漏加会导致栅格布局失效
• spacing={3}：卡片之间的间距，1单位对应MUI默认基准8px，可自行调整
• size={{xs:12, sm:6, md:4}}：响应式占比配置
  • 屏幕宽度<600px（移动端）：单张占12列，一行1张
  • 600px≤屏幕宽度<900px（平板）：单张占6列，一行2张
  • 屏幕宽度≥900px（桌面端）：单张占4列，一行3张
• sx={{height: '100%'}}：保证同行卡片高度统一，避免因内容高度不同出现错位

方案2：使用旧版Grid组件（兼容MUI v4/v5） #

导入依赖：
import { Grid, Card, CardContent, Typography } from '@mui/material';

完整组件代码：

const ThreeColumnCardGrid = () => {
  const cardData = Array.from({length: 9}, (_, index) => ({
    id: index,
    title: `卡片${index + 1}`,
    desc: '卡片内容示例'
  }))

  return (
    <Grid container spacing={3}>
      {cardData.map(card => (
        <Grid key={card.id} item xs={12} sm={6} md={4}>
          <Card sx={{ height: '100%' }}>
            <CardContent>
              <Typography variant="h6" component="h3">
                {card.title}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {card.desc}
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  )
}

注意事项 #

• 子Grid项必须加item属性，容器必须加container属性，这是最容易漏写导致布局失效的原因
• 如果不需要响应式，所有尺寸下都强制一行3张，直接配置size={4}（Grid2）或者xs={4}（旧版Grid）即可
• 如果不需要卡片间距，直接删除spacing属性即可

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