CSS Grid布局在Chrome/Edge中video元素渲染不符合预期求助

问题根因 #

Chrome/Edge内核的替换元素（如video）默认最小尺寸为自身内容原始尺寸，会撑开CSS Grid的1fr单元格（默认1fr等价于minmax(auto, 1fr)，最小尺寸受内容影响），同时video默认的内容填充规则会拉伸覆盖容器，导致布局溢出。

修复方案 #

仅需修改CSS部分即可，无需调整JS和HTML结构，完全兼容后续动态加载任意行列跨度布局的需求：

.grid-container {
  display: grid;
  /* 所有列都设置为minmax(0, 1fr)，忽略内容最小尺寸限制 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  /* 用gap实现窄边框效果，无需额外样式 */
  gap: 2px;
  align-content: center;
  width: 100vw;
  height: 100vh;
  background-color: black;
  /* 清除默认边距避免滚动条 */
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.video-wrap {
  width: 100%;
  height: 100%;
  background-color: black;
  /* 新增以下规则 */
  display: block;
  /* 视频按比例缩放适配容器，不拉伸 */
  object-fit: contain;
  /* 强制限制尺寸不超过容器 */
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

/* 原有item定位规则保持不变即可 */
.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

.item4 {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

效果验证 #

修改后所有浏览器表现一致，符合预期效果：

• Firefox默认正常效果：
  
• 修改前Chrome/Edge异常效果：
  

布局扩展性说明 #

当前CSS Grid方案完全支持任意行列跨度配置，后续从数据库读取到元素的行列起止值后，直接绑定到对应元素的grid-column和grid-row属性即可，无需调整容器布局规则，比Bootstrap栅格实现更灵活，代码更简洁。

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