如何使网格中的项目适合一行？

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，你可以有自动的列数。