CSS 网格 - 将所有子项保持在一行且间距相等

Question

这个问题已经有答案了:

Equal width columns in CSS Grid (11 个回答)

已关闭 2 年前。

使用 CSS Grid，当您不知道会有多少个子项时，如何将所有子项保留在一行中？

我需要所有的 child 都有平等的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>