如何实现类YouTube视频页面响应式布局？CSS Grid/Flexbox可行吗？

当然可以用CSS Grid或者Flexbox完美实现这个YouTube式的响应式布局，而且比你之前用table的方案更符合现代前端规范，语义化更清晰，调整起来也更灵活。咱们分别来看两种实现方式：

方案一：CSS Grid 实现（推荐） #

CSS Grid是专门为二维布局设计的工具，能直接处理这种「左右分栏+上下堆叠」的组合场景，代码直观易懂：

HTML 结构 #

只需要给三个核心元素加一个父容器即可，保持语义化：

<div class="youtube-layout">
  <div id="video">Video</div>
  <div id="related">Related Videos</div>
  <div id="comments">Comments</div>
</div>

CSS 代码 #

/* 桌面端布局（默认适配大于768px的屏幕） */
.youtube-layout {
  display: grid;
  /* 左侧占2/3宽度，右侧占1/3，可根据需求调整比例 */
  grid-template-columns: 2fr 1fr;
  /* 用区域名定义布局位置，直观好理解 */
  grid-template-areas:
    "video related"
    "comments related";
  gap: 1rem; /* 元素间的间距，可选配置 */
}

#video {
  grid-area: video;
  background: #f0f0f0;
  padding: 2rem;
}

#related {
  grid-area: related;
  background: #e0e0e0;
  padding: 2rem;
  /* 让右侧栏自动占满垂直高度 */
  height: fit-content;
}

#comments {
  grid-area: comments;
  background: #d0d0d0;
  padding: 2rem;
}

/* 移动端布局（适配小于等于768px的屏幕） */
@media (max-width: 768px) {
  .youtube-layout {
    grid-template-columns: 1fr; /* 切换为单列布局 */
    grid-template-areas:
      "video"
      "related"
      "comments";
  }
}

方案二：Flexbox 实现 #

如果更习惯用Flexbox（一维布局工具），也能通过嵌套容器实现需求：

HTML 结构 #

需要把视频和评论放到同一个子容器里，作为左侧栏：

<div class="youtube-layout">
  <div class="left-column">
    <div id="video">Video</div>
    <div id="comments">Comments</div>
  </div>
  <div id="related">Related Videos</div>
</div>

CSS 代码 #

/* 桌面端布局 */
.youtube-layout {
  display: flex;
  gap: 1rem;
}

.left-column {
  flex: 2; /* 左侧栏占2份宽度 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#related {
  flex: 1; /* 右侧栏占1份宽度 */
  background: #e0e0e0;
  padding: 2rem;
  height: fit-content;
}

#video {
  background: #f0f0f0;
  padding: 2rem;
}

#comments {
  background: #d0d0d0;
  padding: 2rem;
}

/* 移动端布局 */
@media (max-width: 768px) {
  .youtube-layout {
    flex-direction: column; /* 切换为垂直排列 */
  }
  /* 通过order属性调整显示顺序，确保Video→Related→Comments */
  #related {
    order: 1;
  }
  .left-column {
    order: 0;
  }
  #comments {
    order: 2;
  }
}

为什么不推荐用Table布局？ #

你之前的table方案虽然能实现效果，但有几个明显的问题：

• 语义化错误：table标签是用来展示表格数据的，不是用来做页面布局的，违背了HTML语义化原则，不利于SEO和屏幕阅读器访问。
• 灵活性差：要调整布局比例、间距或者添加新元素时，table的单元格结构会限制操作，远不如Grid/Flex灵活。
• 响应式调整麻烦：table的rowspan在移动端很难优雅转换成垂直布局，而Grid/Flex只需要修改几行CSS就能完成适配。

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