React中如何将视频列表调整为每行两列顺序加载展示

现有代码已经完成数据拉取和单条视频内容渲染，仅需调整JSX类名、补充容器布局样式即可实现每行2个视频的逐行排列效果，无需改动数据遍历的核心逻辑。

调整JSX结构 #

给遍历生成的单条视频外层节点添加专属类名，修改后的组件代码如下：

const VideoPage = ({ data }) => {
return (
    <div>
        <Layout>
        <Head title="Videos"/>
            <div className={videoStyles.container}>
                {data.allContentfulVideoEmbed.nodes.map((node) => {
                    return (
                        <div className={videoStyles.videoCard}>
                            <div className={videoStyles.videoWrapper}
                            dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
                            />
                            <div className={videoStyles.titles}>
                                <p>{node.title}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </Layout>
    </div>
)
}

补充CSS Modules样式 #

在你引入的videoStyles对应的样式文件中，添加以下布局规则，使用Flex布局实现自动换行、两列排列：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* 控制视频项之间的横向、纵向间距，可根据设计需求调整数值 */
  width: 100%;
}

.videoCard {
  width: calc(50% - 12px);
  box-sizing: border-box;
}

/* 可选：移动端适配，屏幕宽度小于768px时自动切换为单列展示 */
@media (max-width: 768px) {
  .videoCard {
    width: 100%;
  }
}

注意事项 #

• 若原有.container类已存在其他样式，仅需补充display: flex、flex-wrap: wrap、gap三个属性即可，无需覆盖已有规则
• calc(50% - 12px)中的12px为gap值的二分之一，若你调整了gap的间距数值，该数值要同步修改为gap值的一半，保证两列宽度加总间距后刚好撑满容器
• 若需要兼容极老旧浏览器，可将gap替换为margin写法，gap方案在现代浏览器中已全量支持
• 原有.videoWrapper、.titles类的样式无需修改，不会影响两列布局效果

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