React元素居中失败及每行3个VideoBox布局适配问题求助

一、核心实现思路 #

用CSS Grid（推荐）或Flexbox实现每行3个组件的自适应布局，同时让整体容器宽度匹配标题，实现页面水平居中。

二、具体代码调整 #

1. 添加/修改CSS样式 #

/* 包裹标题和VideoBox列表的父容器 */
.projects-wrap {
  width: fit-content; /* 自动适配标题的实际宽度 */
  margin: 0 auto; /* 让容器在页面水平居中 */
}

/* VideoBox列表容器 */
.video-box-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制每行展示3个组件 */
  gap: 16px; /* 组件之间的间距，可按需调整 */
  margin-top: 20px; /* 标题与列表的间距 */
}

/* 单个VideoBox组件样式 */
.video-box {
  width: 100%; /* 占满所在网格的宽度 */
  box-sizing: border-box; /* 避免内边距/边框撑大组件宽度 */
}

2. 调整React组件结构 #

确保标题和VideoBox列表放在同一个父容器内：

// 示例组件结构
function ProfessionalProjects() {
  // 假设这是你的VideoBox数据
  const projectList = [
    { id: 1, title: "项目1" },
    { id: 2, title: "项目2" },
    { id: 3, title: "项目3" },
    { id: 4, title: "项目4" }
  ];

  return (
    <div className="projects-wrap">
      <h2>P R O F E S S I O N A L    P R O J E C T S</h2>
      <div className="video-box-container">
        {projectList.map(item => (
          <VideoBox key={item.id} {...item} />
        ))}
      </div>
    </div>
  );
}

三、Flexbox替代方案 #

如果更熟悉Flexbox，可将列表容器样式替换为：

.video-box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.video-box {
  flex: 0 0 calc(33.333% - 10.666px); /* 减去间距占比，保证每行3个组件 */
  box-sizing: border-box;
}

四、移动端适配优化（可选） #

添加媒体查询，在小屏幕设备上自动改为每行1个组件：

@media (max-width: 768px) {
  .video-box-container {
    grid-template-columns: 1fr; /* Grid版本：每行1个 */
    /* Flexbox版本替换为：flex-direction: column; 或 .video-box { flex: 0 0 100%; } */
  }
}

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