如何创建16个动态排列且保持宽高比的div？首个为其余2倍大小

可以用CSS Grid轻松实现这个需求，既支持动态行列排列，又能严格保持所有容器的宽高比，同时让第一个容器尺寸为其余的2倍。以下是完整实现代码：

HTML 结构 #

<div class="video-grid">
  <!-- 第一个特殊尺寸的视频容器 -->
  <div class="video-container featured">
    <video src="your-video-1.mp4" autoplay muted loop></video>
  </div>
  <!-- 剩余15个普通视频容器 -->
  <div class="video-container">
    <video src="your-video-2.mp4" autoplay muted loop></video>
  </div>
  <div class="video-container">
    <video src="your-video-3.mp4" autoplay muted loop></video>
  </div>
  <!-- 重复添加至16个容器 -->
</div>

CSS 样式 #

.video-grid {
  display: grid;
  /* 自动生成响应式列：最小宽度200px，超出后自动拉伸 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; /* 网格间距，可根据需求调整 */
  padding: 1rem;
}

.video-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9; /* 统一宽高比，可改为4/3、1/1等 */
}

/* 第一个容器占2行2列，实现2倍尺寸效果 */
.video-container.featured {
  grid-row: span 2;
  grid-column: span 2;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 视频填满容器且不变形 */
}

关键说明 #

• 动态行列适配：repeat(auto-fill, minmax(200px, 1fr))会根据父容器宽度自动计算列数，窗口缩小到一定程度会自动换行，完全适配不同屏幕尺寸。
• 宽高比保持：aspect-ratio属性直接定义容器的宽高比例，确保所有视频容器的比例完全一致，不会因布局变化变形。
• 特殊尺寸实现：通过grid-row: span 2和grid-column: span 2让第一个容器占据2行2列的网格空间，视觉上宽高均为普通容器的2倍，符合需求。

如果需要调整第一个容器的尺寸逻辑（比如仅宽度为2倍、高度不变），只需移除grid-row: span 2即可。

内容的提问来源于stack exchange，提问作者Neeraj Kumar S