如何实现固定尺寸div的响应式自动重排网格布局？

核心问题修正与思路 #

你需要实现固定尺寸卡片的响应式列数切换，现有代码存在两个关键问题：一是多个卡片复用同一个id（HTML规范要求id唯一），二是容器未配置响应式换行与适配逻辑。以下是针对性的解决方案：

修改后的完整代码 #

1. React组件定义（修正id重复问题）

将卡片的id改为class，避免DOM标识冲突：

function ExperienceCard(props) {
    return (
        <div className="experience-card">
            <p>卡片内容</p>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </div>
    )
}

2. 响应式CSS布局

基于Flexbox实现自动换行，配合媒体查询控制不同屏幕下的列数：

/* 固定尺寸卡片样式 */
.experience-card {
    position: relative;
    width: 400px;
    height: 400px;
    z-index: 8;
    background-color: #171717;
    border: 1px solid;
    font-family: Inter;
}

/* 卡片容器基础配置 */
#cards {
    display: flex;
    flex-wrap: wrap; /* 超出宽度自动换行 */
    gap: 20px; /* 卡片间统一间距 */
    padding: 20px; /* 避免卡片贴容器边缘 */
}

/* 窄屏（≤800px）：单列布局 */
@media (max-width: 800px) {
    #cards {
        justify-content: center; /* 卡片居中显示 */
    }
}

/* 中屏（801px-1280px）：每行2个 */
@media (min-width: 801px) and (max-width: 1280px) {
    #cards {
        max-width: 840px; /* 2张卡片+间距的总宽度，留余量 */
        margin: 0 auto; /* 容器居中 */
        justify-content: space-around;
    }
}

/* 宽屏（≥1281px）：每行3个 */
@media (min-width: 1281px) {
    #cards {
        max-width: 1260px; /* 3张卡片+间距的总宽度，留余量 */
        margin: 0 auto; /* 容器居中 */
        justify-content: space-around;
    }
}

3. 父容器React代码（无需修改）

<div id="cards">
   <ExperienceCard />
   <ExperienceCard />
   <ExperienceCard />
   {/* 可继续添加更多卡片 */}
</div>

关键逻辑说明 #

• flex-wrap: wrap：确保卡片超出容器宽度时自动换行；
• gap：替代margin统一控制卡片间距，布局更整洁；
• 媒体查询断点：根据卡片固定尺寸计算（卡片宽度×列数+间距），保证每行恰好显示对应数量的卡片；
• max-width + margin: 0 auto：避免宽屏时卡片过度分散，保持布局紧凑美观。

内容的提问来源于stack exchange，提问作者Gift G.