如何为使用auto-fit列的CSS Grid容器实现自适应宽度？

可以通过调整网格容器的显示类型实现这个需求，无需JavaScript计算。

核心思路是将网格容器从块级的grid改为内联块级的inline-grid，结合你现有的auto-fit配置：

.my-grid {
  display: inline-grid; /* 关键修改 */
  grid-template-columns: repeat(auto-fit, 8em);
  gap: 0.5em; /* 可选，添加网格项间距 */
}

原理说明 #

• inline-grid会让网格容器成为内联块级元素，其宽度由内部网格的实际布局决定，而非默认占满父容器宽度。
• auto-fit依然会根据容器的可用空间（父容器的宽度）自动调整列数：空间足够时显示尽可能多的8em列，空间不足时自动换行。
• 由于容器是内联块级，父容器（比如<dialog>）会自动适配网格容器的实际宽度——即当前一行列数 × 8em，完全符合你需要的效果。

示例用法（结合<dialog>） #

<dialog open>
  <div class="my-grid">
    <div>项目A</div>
    <div>项目B</div>
    <div>项目C</div>
    <div>项目D</div>
    <div>项目E</div>
    <div>项目F</div>
  </div>
</dialog>

dialog {
  padding: 1em;
  border: none;
  box-shadow: 0 0 1em rgba(0,0,0,0.2);
}

额外优化 #

如果需要限制网格容器的最大宽度（比如不超出视口），可以添加max-width: 100%，避免容器过宽：

.my-grid {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 8em);
  gap: 0.5em;
  max-width: 100%;
}

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