带aspect-ratio的Grid项引发CSS Grid页面溢出问题咨询

问题描述 #

我创建了一个CSS Grid布局，为网格项设置了aspect-ratio: 1 / 1，但该设置导致网格溢出页面，不清楚原因。期望网格适配屏幕且左右留有空白，同时网格项为精确正方形。

相关代码 #

CSS代码：

html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.span-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 100vh;
}

.div {
  background-color: red;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

HTML代码：

<div class="span-grid">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

高分辨率下布局效果：

问题原因 #

• 给.span-grid设置height:100vh后，网格项的height:100%会继承这个高度值，再加上aspect-ratio:1/1的强制约束，网格项的宽度会被拉伸到和高度一致的数值。结合gap:10px的横向间距，整体宽度会超出视口范围，导致横向溢出。
• 容器未设置内边距，无法实现左右留白的需求。

解决方案 #

方案1：适配视口宽度，保留左右留白 #

调整Grid容器和网格项的样式，让布局基于宽度适配，避免强制拉伸：

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.span-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 15px; /* 左右留白 */
  max-width: 100vw; /* 限制容器最大宽度为视口宽度 */
  margin: 0 auto; /* 容器居中（可选） */
}

.div {
  background-color: red;
  aspect-ratio: 1 / 1; /* 仅保留该属性，移除width/height的强制设置 */
}

方案2：让整个Grid容器保持正方形并居中 #

如果需要Grid整体占满视口且保持正方形比例，可通过视口宽度计算高度：

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.span-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 15px; /* 四周留白 */
  max-width: 100vw;
  max-height: calc(100vw - 30px); /* 减去左右padding总宽度，让高度匹配宽度 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div {
  background-color: red;
  aspect-ratio: 1 / 1;
}

内容的提问来源于stack exchange，提问作者Mikołaj Waśniewski