CSS网格布局：如何将所有元素放在一行上？

Question

我试图更多地使用网格布局，但我无法理解一个应该很简单的问题。我该如何将所有元素放在单行中？

也就是说，我想模拟单行的 flex 布局。

我知道我可以在下面的示例中使用 grid-template-columns: 1fr 1fr 1fr 1fr;，但我不想设置特定数量的列。

div#flex {
  display: flex;
  flex-direction: row; /* I know that’s not necessary */
}
div#flex>button {
  flex: 1;
}

div#grid {
  display: grid;
  grid-template-rows: 1fr;
}
div#grid>button {

}

<div id="flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

<div id="grid">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

- Manngo

Answer 1

您只需添加 grid-auto-flow: column; ：https://stackblitz.com/edit/angular-9midxc

div#flex {
  display: flex;
  flex-direction: row;
  /* I know that’s not necessary */
}

div#flex>button {
  flex: 1;
}

div#grid {
  display: grid;
  grid-auto-flow: column;
}

div#grid>button {}

<div id="flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

<div id="grid">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

- Aymen TAGHLISSIA

---

谢谢您的回答。我看到grid-auto-flow的默认值是row，这就是我的问题所在。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow - Manngo