html - 如何设置 grid-auto-columns 以平均划分列？

Question

我正在尝试创建 3 列，宽度相等，无论子宽度如何，它们都应该相等。考虑以下示例：

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  width: 500px;
  height: 200px;
  grid-auto-flow: column;
  align-items: stretch;
  justify-items: stretch;
}
.first {
  background-color: red;
}
.second {
  background-color: blue;
  width: 300px;
}
.third {
  background-color: yellow;
}

<div class='grid'>
  <span class='first'></span>
  <span class='second'></span>
  <span class='third'></span>
</div>

如您所见，第二个孩子（有意设置为比其兄弟姐妹更宽）更宽，但是，其网格父级已将其列设置为相等宽度。那些应该是相等的，但是正如我所看到的，它的定义fr是它占用了可用空间的 x 分数，这可能就是它搞砸的原因，因为第三个孩子确实占用了可用空间的一小部分——这更小，因为第二列占用了更多空间。

对于那些抓住机会的人来说，以上是最初的想法，正如解释的那样，这样做是有道理的。

所以问题是 - 给定未知数量的列，我应该如何设置grid-auto-columns以忽略孩子的宽度，使所有列都一样宽。（尝试了 100%，但它不是分割空间，而是成倍增加）

标签： htmlcssgrid