基于Bootstrap 5实现无滚动条视口满屏MxN视频网格布局

核心方案思路 #

要实现单屏无滚动、动态行列的16:9视频网格，关键是让容器严格贴合视口尺寸，同时通过相对单位和宽高比约束确保单元格自适应，避免溢出。

完整代码实现 #

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 全局重置，消除默认边距和滚动条 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      overflow: hidden; /* 彻底禁用滚动条 */
      height: 100vh;
      width: 100vw;
    }
    /* 网格容器：占满整个视口，自动分配行列 */
    .video-grid-container {
      height: 100vh;
      width: 100vw;
      padding: 1rem; /* 可选：添加内边距避免视频贴边 */
      display: grid;
      /* 动态行列：根据容器尺寸自动调整，确保单元格不溢出 */
      grid-template-columns: repeat(auto-fit, minmax(min(100% / var(--columns), 100vh * 9 / 16 / var(--rows)), 1fr));
      grid-template-rows: repeat(auto-fit, minmax(min(100vh / var(--rows), 100vw * 16 / 9 / var(--columns)), 1fr));
      gap: 0.5rem; /* 单元格间距 */
    }
    /* 单元格：强制16:9宽高比，内部居中 */
    .video-cell {
      aspect-ratio: 16/9;
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; /* 避免视频超出单元格 */
    }
    /* 视频：自适应单元格尺寸，保持比例 */
    .video-cell video {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain; /* 确保视频完整显示，不拉伸 */
    }
  </style>
</head>
<body>
  <!-- 通过CSS变量动态设置行列数 -->
  <div class="video-grid-container" style="--columns: 3; --rows: 2;">
    <div class="video-cell">
      <video controls>
        <source src="your-video-url.mp4" type="video/mp4">
      </video>
    </div>
    <div class="video-cell">
      <video controls>
        <source src="your-video-url.mp4" type="video/mp4">
      </video>
    </div>
    <div class="video-cell">
      <video controls>
        <source src="your-video-url.mp4" type="video/mp4">
      </video>
    </div>
    <div class="video-cell">
      <video controls>
        <source src="your-video-url.mp4" type="video/mp4">
      </video>
    </div>
    <div class="video-cell">
      <video controls>
        <source src="your-video-url.mp4" type="video/mp4">
      </video>
    </div>
    <div class="video-cell">
      <video controls>
        <source src="your-video-url.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</body>
</html>

关键细节解释 #

1. 禁用滚动条：通过body { overflow: hidden; height: 100vh; width: 100vw; }强制页面占满视口，彻底消除滚动条。
2. 动态行列适配：利用CSS变量--columns和--rows动态定义行列数，通过min()函数计算单元格最小尺寸，确保无论窗口怎么缩放，单元格都能完整显示在视口内，不会溢出。
3. 16:9宽高比：用aspect-ratio: 16/9直接约束单元格比例，替代复杂的padding-top技巧，更简洁可靠；也可以直接用Bootstrap 5内置的aspect-ratio-16x9类替换。
4. 视频居中与适配：单元格用flex布局实现视频水平垂直居中，视频设置max-width: 100%; max-height: 100%; object-fit: contain，保证视频完整显示且不拉伸变形。
5. Bootstrap网格兼容：如果偏好Bootstrap网格系统，可将容器改为.container-fluid h-100 w-100，单元格用.col类配合aspect-ratio-16x9，再添加自定义CSS控制容器溢出，核心逻辑一致。

动态行列数的JS处理（可选） #

如果行列数需要通过JS动态设置，只需修改容器的CSS变量即可：

// 示例：动态设置为4列3行
const gridContainer = document.querySelector('.video-grid-container');
gridContainer.style.setProperty('--columns', 4);
gridContainer.style.setProperty('--rows', 3);

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