CSS Grid隐式行与aspect-ratio问题：如何维持方块正方形比例？

我想要实现一个可横向滚动、包含多种方块的CSS Grid布局，但目前遇到问题：超出初始宽度的方块aspect-ratio被挤压，失去正方形比例，网格容器宽度未随内容扩展。

现有代码 #

CSS代码

.grid {
  display:grid;
  grid-template-rows: repeat(3,auto);
  grid-auto-flow: column;
  grid-template-columns:repeat(auto-fit,30vh);
  height:100%;
  
/*   not working */
  width:auto; 
}

.cell {
  outline:1px solid red;

  height:100%;
  width:auto;
}

.content {
  aspect-ratio:1/1;
}

.c2 {
  grid-row:span 3;
  grid-column:span 3;
}

.c3 {
  grid-row:span 3;
  grid-column:span 3;
}

.break {
  grid-row-start: 1;
  font-size:30px;
}

HTML代码

<div class="grid">
  <div class="cell c3">
    <div class="content">
      hello
    </div>
  </div>
  <div class="cell c2">
    <div class="content">
      helo
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell break">
    <div class="content">
      sort of a title
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>
  <div class="cell c3">
    <div class="content">
      hello
    </div>
  </div>
  <div class="cell c2">
    <div class="content">
      helo
    </div>
  </div>
  <div class="cell">
    <div class="content">
      helll
    </div>
  </div>

</div>

问题表现 #

在初始宽度边界处，方块比例被挤压，失去正方形形态：

解决方案 #

核心问题是auto-fit会在容器空间不足时压缩列宽，同时容器未随内容撑开。修改后的CSS代码如下：

.grid {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  /* 用auto-fill+minmax固定列宽，避免被挤压 */
  grid-template-columns: repeat(auto-fill, minmax(30vh, 30vh));
  height: 100%;
  /* 开启横向滚动 */
  overflow-x: auto;
  /* 让容器宽度随内容自动撑开 */
  width: fit-content;
}

.cell {
  outline: 1px solid red;
  height: 100%;
}

.content {
  aspect-ratio: 1/1;
  /* 确保内容填满单元格，保证比例生效 */
  width: 100%;
  height: 100%;
}

.c2 {
  grid-row: span 3;
  grid-column: span 3;
}

.c3 {
  grid-row: span 3;
  grid-column: span 3;
}

.break {
  grid-row-start: 1;
  font-size: 30px;
}

修改说明 #

• 将grid-template-columns的auto-fit替换为auto-fill，配合minmax(30vh, 30vh)固定列宽，避免列被压缩。
• 给.grid添加width: fit-content，让容器宽度跟随内容自动扩展，不再被父容器限制。
• 添加overflow-x: auto，当内容超出视口时开启横向滚动。
• 给.content补充width: 100%; height: 100%;，确保内容完全填充单元格，让aspect-ratio稳定生效。

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