React Grid布局商品卡片样式适配：如何复刻目标设计效果？

1. 调整JSX结构（可选优化） #

合并两个卡片容器，让Grid自动处理换行，代码更简洁：

<div className="incentive-card">
  <div className="incentive-card-header">
    <h3>The power of your donation</h3>
    <p>
      Every drop of blood can transform a life. By donating blood, you
      support accident victims, patients in surgeries, and your community.
    </p>
  </div>
  <div className="incentive-product-card-container">
    {/* 渲染前5个卡片 */}
    {InData.slice(0,5).map((d, index) => (
      <div className="product-card2" key={index}>
        <div className="incentive-card-text">
          <h3>{d.title}</h3>
          <p>{d.description}</p>
        </div>
        <div className="incentive-card-image">
          <img src={d.image} alt={d.title} />
        </div>
      </div>
    ))}
  </div>
</div>

2. 核心样式修改 #

（1）让卡片宽度自适应Grid列

移除固定宽度，改为100%填充，确保响应式对齐：

.incentive-card-text {
  /* 替换 width:350px */
  width: 100%;
  min-height: 190px; /* 用min-height避免内容溢出 */
  /* 其他原有样式保留 */
}

.incentive-card-image img {
  /* 替换 width:350px */
  width: 100%;
  /* 其他原有样式保留 */
}

（2）调整Grid容器布局，实现第二行卡片居中

修改容器的Grid配置，让第二行两个卡片自动居中：

.incentive-product-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  row-gap: 40px;
  padding: 0 5rem;
  margin-top: 40px;
  /* 让行内元素在容器内居中 */
  justify-items: center;
}

/* 针对第二行的两个卡片，调整列位置实现整体居中 */
@media (min-width: 768px) {
  .product-card2:nth-child(4) {
    grid-column: 2;
  }
  .product-card2:nth-child(5) {
    grid-column: 3;
  }
}

如果坚持保留两个独立容器，可单独修改第二个容器的样式：

/* 第一个3列容器样式不变 */
.incentive-product-card-container:first-of-type {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  row-gap: 40px;
  padding: 0 5rem;
  margin-top: 40px;
}

/* 第二个2列容器，强制居中 */
.incentive-product-card-container:last-of-type {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 0 5rem;
  margin: 40px auto 0;
  max-width: 800px; /* 限制宽度避免卡片过宽 */
  justify-content: center;
}

（3）修复标题段落的居中问题

替换固定宽度和偏移，改为自适应居中：

.incentive-card-header p {
  /* 替换 width:769px 和 margin-left:20% */
  max-width: 769px;
  margin: 0 auto;
  /* 其他原有样式保留 */
}

3. 细节优化 #

• 给每个卡片添加key属性，避免React警告
• 图片alt属性改为商品标题{d.title}，提升可访问性
• 给.product-card2添加overflow: hidden，确保图片圆角正常显示

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