CSS Grid - 将所有子项保持在一行上并且等距[重复]

Question

使用 CSS Grid，当你不知道会有多少个孩子时，如何让所有孩子排成一行？

我需要所有孩子都拥有相等的width，所以如果有 2 个孩子，他们每个人将有 50% 的宽度，如果有 3 个孩子，他们每个人都有 33.33% 的宽度等等。

.container {
   display: grid;
}

<div class='container'>
   <div>Child 1</div>
   <div>Child 2</div>
   <div>Child 3</div>
   // There maybe 4 or 5 children we don't know
</div>

Answer 1

使用列流并保持所有大小1fr

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:column;
}

.grid > div {
  background-color: tomato;
  height: 50px;
  border: 1px solid black;
}

Example 1:

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Example 2:

<div class="grid">
  <div></div>
  <div></div>
</div>

Example 3:

<div class="grid">
  <div></div>
  <div></div>  
  <div></div>
  <div></div>  
  <div></div>
  <div></div>  
  <div></div>
  <div></div>  
  <div></div>
  <div></div>
</div>

Answer 2

这可以通过使用 repeat、auto-fit 和 minmax 轻松完成 CSS 网格。

本质上，我们在这里所做的是将子元素设置为占据其“网格容器”的全部宽度，然后我们将网格设置为auto-fit，并说每个子元素都是最小值50px 或最多 1fr。

另一个好方法是只使用grid-auto-columns 和grid-auto-flow。取决于您的具体用例，哪种方法更好，但请务必查看 Temani Afif's answer 以了解其他解决方案。

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.grid > div {
  background-color: tomato;
  height: 50px;
  width: 100%;
  border: 1px solid black;
}

Example 1:

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Example 2:

<div class="grid">
  <div></div>
  <div></div>
</div>

Example 3:

<div class="grid">
  <div></div>
  <div></div>  
  <div></div>
  <div></div>  
  <div></div>
  <div></div>  
  <div></div>
  <div></div>  
  <div></div>
  <div></div>
</div>