Grid列无法适配内部内容问题求助

原始代码 #

CSS #

#grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: column;
  height: 900px;
  width: 100%;
}

#grid > section {
  border: 2px solid cyan;
}

#grid > section > div {
  border: 2px solid red;
  height: 80%;
  aspect-ratio: 1/1;
}

HTML #

<div id="grid">
  <section>
    <div></div>
  </section>
  <!-- 重复的section元素省略 -->
</div>

问题描述 #

蓝色边框的section元素宽度无法自动匹配内部红色正方形div，需要让section宽度与红色盒子完全一致。

修复方案 #

方案一：调整Grid列宽与section布局 #

通过设置Grid容器的自动列宽为fit-content，让列宽自适应内容，并将section设为Flex容器实现内部div居中，确保section宽度匹配div：

#grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: fit-content; /* 让列宽适配内容宽度 */
  height: 900px;
  width: 100%;
}

#grid > section {
  border: 2px solid cyan;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* 清除默认内边距避免宽度冗余 */
}

#grid > section > div {
  border: 2px solid red;
  height: 80%;
  aspect-ratio: 1/1;
}

方案二：直接指定section宽度逻辑 #

如果需要更直接的控制，可以基于Grid行高比例计算section宽度，确保与div尺寸一致：

#grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: column;
  height: 900px;
  width: 100%;
}

#grid > section {
  border: 2px solid cyan;
  /* 宽度等于行高的80%，与div的高度比例一致 */
  width: calc(100% * 0.8);
  margin: 0 auto; /* 水平居中对齐 */
}

#grid > section > div {
  border: 2px solid red;
  height: 80%;
  aspect-ratio: 1/1;
}

关于临时生效的特殊现象 #

设置#grid > section { width: max-content; }在开发者工具中临时生效，但刷新后失效，这大概率是浏览器渲染顺序的bug：

• 初始渲染时，div的宽度依赖section的高度（由Grid行决定），而section的宽度又依赖div的尺寸，形成循环依赖，浏览器无法正确计算max-content值。
• 在开发者工具修改样式时触发强制重排，此时section高度已确定，div宽度可正常计算，max-content因此生效。

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