Material UI实现每行3张卡片横向排列问题求助

刚接触Material UI和ReactJS，想要实现卡片横向排列且每行显示3个，但当前仅显示为一列。尝试用Grid和flexbox实现时页面内容全部消失，以下是原代码及解决方法：

原代码 #

Header组件 #

import * as React from 'react';
import Jobs from './Jobs'

const jobs1=[{
    company:"razer",
    jobtitle:"Data engineer",
   
},{
    company:"Huawei",
    jobtitle:"Data Engineer"
},{
    company:"Huawei",
    jobtitle:"Data Engineer"
}]
export default function Header() {
  return (
    jobs1.map((jobs1)=>(
        <Jobs jobs1={jobs1}/>
    )))
}

Jobs卡片组件 #

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import img from './image/Razer.png'
import Typography from '@mui/material/Typography';
import {Grid,Box } from '@mui/material'

const Jobs = ({jobs1: {company, jobtitle}})=>{
    return (
      
      <Card sx={{ maxWidth: 300 }}>
      <CardMedia
        component="img"
        height="100"
        sx={{ width: 100}}
        
        image={img}
        alt="razer"
      />
      <CardContent>
        <Typography style={{color: '#bdbdbd'}} gutterBottom variant="h9" component="div">
        {company}
        </Typography>
        <Typography component="div">
        <Box sx={{ fontWeight: 'bold' }}>
        {jobtitle}
          </Box>
        </Typography>
        <Grid container direction="row" alignItems="center" gap={14}>  
            <Typography sx={{fontStyle: 'italic'}} style={{color: '#bdbdbd'}} inline variant="body1"  align="left">
                1 minute ago
            </Typography>
            <Typography inline variant="body1" > 
            <Box sx={{ borderRadius: '12px', p: 1,opacity:"0.5", border: '0.5px solid',color: "#64dd17",bgcolor:"#ccff90" }}>Data</Box> 
                
            </Typography>
        </Grid>
        <Typography  style={{color: '#bdbdbd'}}>____________________________</Typography>
      </CardContent>
    </Card>
  );
}
export default Jobs;

解决方法 #

问题核心是缺少布局容器包裹卡片列表，直接map输出的卡片默认是块级元素，会垂直排列。用Material UI的Grid组件构建标准布局即可：

修改Header组件 #

在卡片列表外层添加Grid container，给每个卡片包裹Grid item，通过断点属性控制不同屏幕下的列数，同时给循环元素添加唯一key避免React警告：

import * as React from 'react';
import Jobs from './Jobs';
import { Grid } from '@mui/material';

const jobs1=[{
    company:"razer",
    jobtitle:"Data engineer",
    id: 1
},{
    company:"Huawei",
    jobtitle:"Data Engineer",
    id: 2
},{
    company:"Huawei",
    jobtitle:"Data Engineer",
    id: 3
}]
export default function Header() {
  return (
    <Grid container spacing={2} sx={{ padding: 2 }}>
      {jobs1.map((job)=>(
        <Grid item xs={12} sm={6} md={4} key={job.id}>
          <Jobs jobs1={job}/>
        </Grid>
      ))}
    </Grid>
  )
}

• xs={12}：小屏幕（<600px）每行1个卡片
• sm={6}：中屏幕（600px-959px）每行2个卡片
• md={4}：大屏幕（≥960px）每行3个卡片
• spacing控制卡片间距，padding控制容器内边距

可选：优化卡片自适应宽度 #

如果希望卡片占满Grid项的宽度，修改Jobs组件中Card的样式：

<Card sx={{ width: '100%' }}>

为什么之前尝试Grid会导致内容消失？ #

大概率是错误嵌套Grid组件（比如在Jobs里单独加container却没配合item），或者忘记引入Grid组件引发报错，导致渲染失败。现在的写法是Material UI Grid布局的标准用法，层级清晰能保证正常渲染。

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