CSS Grid响应式布局求助：YouTube视频与图片无法自适应占满空间

一、修复YouTube视频占满空间并自适应缩放 #

YouTube iframe默认带固定宽高，要让它填满左侧网格列并保持比例，得用容器包裹+宽高比技巧：

1. 给视频加外层容器（比如.video-container），靠内边距维持16:9的标准视频比例
2. 把iframe设为绝对定位，填满容器空间
3. 确保网格项的内边距不会挤压视频（用box-sizing统一盒模型）

代码示例：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 宽高比计算值 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.grid-container > * {
  box-sizing: border-box; /* 内边距不额外撑开宽度 */
}

二、修复图片自适应缩放 #

给右侧列的图片加以下样式，确保它不超出父容器且比例正常：

.right-column img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

• display: block消除图片默认的内联间距
• height: auto防止图片被拉伸变形

三、修复小屏堆叠与缩放异常 #

设置媒体查询，在小屏设备把网格切换为单列，同时调整间距提升可读性：

/* 断点可根据需求调整，这里用768px作为小屏阈值 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 切换为单列布局 */
    gap: 1.5rem; /* 增加堆叠后的元素间距 */
  }
}

另外，给全局元素重置默认边距，避免布局溢出视口：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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