如何让3x3网格固定在视口内且不受内容大小影响？

嗨，我来帮你搞定这个CCTV视频网格的问题！你现在的代码已经搭好了基础框架，只是还差几个关键调整，就能让整个3x3网格完美贴合视口，完全不会出现滚动条。

咱们一步步来改：

• 首先给body加上overflow: hidden，这样就算有内容不小心溢出视口，也不会出现滚动条，确保页面始终是全屏无滚动的状态。
• 你的容器只设置了列的均分，却没指定行的分配！给#container加上grid-template-rows: repeat(3, 1fr)，这样3行也会平均瓜分整个视口高度，和3列对应上，真正形成3x3的等分布局。
• 因为你给.item加了2px的边框，默认情况下边框会额外占用空间，导致整个网格的总尺寸超出视口。所以给.item加上box-sizing: border-box，让边框包含在元素的宽高之内，不会破坏布局。
• 最后给视频元素加上object-fit: fill，这样不管原视频是什么分辨率，都会拉伸填满整个item容器，完全符合你“无视比例、确保视频可见”的需求（当然如果你的视频播放器本身会处理缩放，这个也可以保留，双重保障）。

下面是修改后的完整代码：

body {
  margin: 0;
  overflow: hidden; /* 新增：禁止滚动 */
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr); /* 新增：均分3行高度 */
  height: 100vh;
  width: 100vw; /* 可选，确保容器占满视口宽度 */
}

.item {
  border: 2px solid red;
  background-color: blue;
  box-sizing: border-box; /* 新增：边框包含在元素尺寸内 */
}

.item video {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 新增：让视频拉伸填满容器 */
}

<div id="container">
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
  <div class="item">
    <video src="你的视频地址" autoplay muted></video>
  </div>
</div>

这样调整后，整个网格就会牢牢固定在视口内，不管视频原分辨率是什么样，每个格子都会等占满视口的1/3宽高，视频也会完全填满格子，页面不会出现任何滚动条。

备注：内容来源于stack exchange，提问作者Codemunkie