如何用CSS Grid实现基于子元素尺寸的auto-fill自适应列布局？

我有一个包含动态数量等尺寸元素的Grid布局（类似网格图片画廊，每张图片尺寸一致），使用repeat(auto-fill, 固定值)的grid-template-columns完全满足需求：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  row-gap: 10px;
  column-gap: 10px;
  background: gray;
  width: 200px;
  justify-content: center;
  padding: 10px;
}

.item {
  border: 1px solid black;
  width: 40px;
  height: 40px;
  background: lime;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
<div>

现在在另一个场景复用同一个Angular组件，但子元素尺寸不同（比如100px * 100px），希望实现类似repeat(auto-fill, auto)的效果——让自动生成的列根据子元素尺寸自适应宽度。

试过Flexbox，但需要space-around的居中布局，且最后一行要对齐网格（当元素数量少于列数时，Flexbox会让最后一行居中，无法对齐网格）。

具体需求：修改.container的CSS，无需在repeat()中设置明确列宽，让以下代码像第一个示例一样正常工作：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  row-gap: 10px;
  column-gap: 10px;
  background: gray;
  width: 200px;
  justify-content: center;
  padding: 10px;
}

.big-item {
  border: 1px solid black;
  width: 60px;
  height: 60px;
  background: lime;
}

<div class="container">
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
  <div class="big-item"></div>
<div>

要实现无需硬编码列宽、自动适配子元素尺寸的Grid布局，同时保持最后一行对齐网格，可通过以下两种方式修改.container的CSS：

方法一：使用min-content #

min-content会自动取子元素的固有最小宽度（即你给子元素设置的宽度值），配合auto-fill自动计算列数：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, min-content);
  row-gap: 10px;
  column-gap: 10px;
  background: gray;
  width: 200px;
  justify-content: center;
  padding: 10px;
}

方法二：使用fit-content() #

fit-content()会根据子元素尺寸和容器可用空间自适应调整列宽，效果与min-content一致（因为子元素有固定宽度）：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, fit-content(100%));
  row-gap: 10px;
  column-gap: 10px;
  background: gray;
  width: 200px;
  justify-content: center;
  padding: 10px;
}

效果说明 #

• 两种方式都不需要手动设置列宽，Grid会自动识别子元素的固定宽度（比如big-item的60px）
• auto-fill会根据容器宽度自动计算可容纳的列数，超出元素自动换行
• justify-content: center保证整体布局居中，同时最后一行元素会严格对齐前面的网格列，不会出现Flexbox那样的居中错位问题

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