如何让覆盖在背景视频上方的grid网格高度与视频一致以方便文字定位

你需要先给视频和网格套一个公共父容器，由视频撑出父容器高度，再让网格绝对定位铺满父容器即可实现两者宽高完全匹配，具体修改如下： #

1. HTML结构调整 #

给两个元素新增公共父容器：

<div class="video-wrapper">
  <video id="myVideo" autoplay muted loop> <!-- 可自行补充视频控制属性、源文件地址 -->
    <source src="你的视频地址.mp4" type="video/mp4">
  </video>
  <div class="grid-container">
    <div class="grid-item">示例文字1</div>
    <div class="grid-item">示例文字2</div>
    <div class="grid-item">示例文字3</div>
    <!-- 按需添加更多网格项 -->
  </div>
</div>

2. 完整CSS修改代码 #

/* 新增父容器样式 */
.video-wrapper {
  position: relative;
  max-width: 100%;
  /* 父容器高度由内部视频自动撑开，无需手动设置 */
}

.grid-container {
  display: grid;
  /* 原33.33%改为1fr平分更精准，避免宽度溢出 */
  grid-template-columns: repeat(3, 1fr);
  /* 如需网格行高均匀分布可取消下行注释，数字调整为你需要的行数即可 */
  /* grid-template-rows: repeat(3, 1fr); */
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 2;
  /* 改为绝对定位铺满父容器，尺寸和父容器完全一致 */
  position: absolute;
  top: 0;
  left: 0;
}

.grid-item {
  background: transparent;
  border: 1px solid #fff;
  font-size: 30px;
  color: white;
  /* 如需格子内文字居中可取消下三行注释 */
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

#myVideo {
  /* 改为正常流，撑出父容器高度 */
  position: static;
  /* 清除视频默认下方留白 */
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
}

最终实现视频作为底层背景，顶层网格完全覆盖视频且宽高与视频完全一致，可直接在网格项中放置需要叠加的文字内容，位置会跟随视频尺寸变化自动适配。

内容的提问来源于stack exchange，提问作者cailin-alcock