html - 如何使网格中的元素适合一行？

Question

我正在尝试让 3 个 div 适合一个网格。但是，我想将代码重用于可以有多个网格的其他网格。这可能还是我应该单独编写代码？

  <div class="div-wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

.div-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:5px;
  width:100%;
  height:10vh;
  background:black;
}

但是，我想将上面的代码用于其他包含 3 个以上 div 的包装器，例如

    <div class="div-wrapper">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
      <div class="div5"></div>
    </div>

Answer 1

那么不要说你有 3 列。

你可以像这样使用grid-auto-flow:

.div-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  width: 100%;
  height: 10vh;
}

然后它将表现得像 flex 并且您可以拥有自动列数。