CSS 网格：如何将所有内容放在一行上？

Question

我正在尝试更多地使用网格，但我不能\xe2\x80\x99t 弄清楚什么应该是一个简单的问题。如何将所有元素放在一行中？

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

div#flex {\r\n  display: flex;\r\n  flex-direction: row; /* I know that\xe2\x80\x99s not necessary */\r\n}\r\ndiv#flex>button {\r\n  flex: 1;\r\n}\r\n\r\ndiv#grid {\r\n  display: grid;\r\n  grid-template-rows: 1fr;\r\n}\r\ndiv#grid>button {\r\n\r\n}

\r\n

<div id="flex">\r\n  <button>One</button>\r\n  <button>Two</button>\r\n  <button>Three</button>\r\n  <button>Four</button>\r\n</div>\r\n\r\n<div id="grid">\r\n  <button>One</button>\r\n  <button>Two</button>\r\n  <button>Three</button>\r\n  <button>Four</button>\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

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

\n

\r\n

\r\n

div#flex {\n  display: flex;\n  flex-direction: row;\n  /* I know that\xe2\x80\x99s not necessary */\n}\n\ndiv#flex>button {\n  flex: 1;\n}\n\ndiv#grid {\n  display: grid;\n  grid-auto-flow: column;\n}\n\ndiv#grid>button {}

\r\n

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

\r\n

\r\n

\r\n

\n