React中Semantic UI的itemsPerRow属性失效问题求助

本人是编程新手，首次提问，若表述不清或代码不规范请见谅。在React中使用Semantic UI的Card.Group组件时，设置itemsPerRow={4}无法将卡片按行排列，无论如何操作都只显示为单列。Projects是ProjectCard的父组件，map函数可正常渲染卡片且数据正确，我尝试过注释全部CSS、调整div结构、使用flex布局、硬编码卡片、移动<Card.Group>标签位置等方法，甚至咨询ChatGPT都未能解决问题。

以下是相关代码：

Projects.js #

import React from "react";
import {Card} from "semantic-ui-react"
import {useEffect, useState} from "react"
import ProjectCard from "./ProjectCard";

function Projects() {

    const [projects, setProjects] = useState([])

    useEffect(() => {
        fetch("http://localhost:3001/projects")
        .then(r => r.json())
        .then(data => setProjects(data))
    } ,[])

    const eachProject = projects.map((project) => ( 
        <ProjectCard key = {project.id}
                    id = {project.id}
                    name = {project.name}
                    image = {project.image}
                    description = {project.description}
                    />
    ));
    
    return ( 
        <div className="project-list">
            <h1 className="project-header" style={{textAlign: "center"}}>Projects Title</h1>
            <Card.Group itemsPerRow={4}>
                {eachProject}
            </Card.Group>  
        </div>
    )
}

export default Projects;

ProjectCard.js #

import React from "react";
import { Card } from "semantic-ui-react";

function ProjectCard({id, name, image, description}) {

    return (
        
        <Card style={{
                boxShadow: "5px 3px 3px rgb(54, 29, 29)",
                }}>
            <div className="project-card">
                <div className="image-container">
                    <img src = {image} alt={name} style={{width: "10%", height: "auto"}}/>
                </div>
                <div className="card-content">
                    <div className="card-header">{name}</div>
                    <p className="card__text">{description}</p>
                    <button className="go-button">Go to Project</button>
                </div>
            </div>
        </Card>
    )
}

export default ProjectCard;

1. 必须引入Semantic UI的CSS文件 #

这是最容易忽略的关键步骤，Semantic UI React的组件布局完全依赖官方提供的CSS文件。在项目的入口文件（比如index.js）中添加以下代码：

import 'semantic-ui-css/semantic.min.css';

如果没有引入该CSS，Card.Group的itemsPerRow属性不会生效，卡片会默认堆叠成单列。

2. 给卡片设置固定宽度（可选但推荐） #

为了让每行4个卡片的布局更稳定，可以给ProjectCard中的Card组件设置固定宽度，避免因内容宽度不一致导致布局错乱：

// ProjectCard.js中修改Card的style
<Card style={{
    width: '240px',
    boxShadow: "5px 3px 3px rgb(54, 29, 29)",
}}>

3. 确保Card.Group的直接子元素是Card组件 #

你的代码中ProjectCard已经直接返回了<Card>，这部分是正确的，无需调整。如果Card.Group内部还有额外的包裹div，会破坏布局逻辑，要避免这种情况。

完成以上步骤后，Card.Group的itemsPerRow={4}应该就能正常生效，卡片会按每行4个排列。

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