如何在使用 `grid-auto-flow: column` 时将`height: auto` 设置为 CSS 网格容器？

Question

下面的代码片段是一个示例子菜单布局。 我想将菜单项均匀地分布在所有三列中，但我想垂直排列它们。

在第一种情况下，项目是均匀分布的，但它们是水平排列的。

在第二种情况下，我尝试将grid-auto-flow切换到column以垂直排列它们，但无论我尝试对grid-template-rows使用什么自动填充/自动调整值，这默认为单行。

在第三种情况下，我手动设置了grid-template-rows的正确绝对值作为概念证明； 但在现实世界中，直到渲染时间才会知道项目的数量（以及所需的行数）。

除了客户端 JavaScript 之外，我还能做些什么来实现这种布局？

 .sub-menu { margin: 0; padding: 2px; border: 1px dashed red; list-style: none; /* the actual grid code */ display: grid; grid-gap: 2px; grid-template-columns: repeat(3, 1fr); }.grid-auto-flow-row { grid-auto-flow: row; }.grid-auto-flow-column { grid-auto-flow: column; }.grid-template-rows-3 { grid-template-rows: repeat(3, 1fr); } li { padding: 2px 4px; border: 1px dashed blue; display: flex; justify-content: center; align-items: center; }

 <h3>grid-auto-flow: row</h3> <ul class="sub-menu grid-auto-flow-row"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> <h3>grid-auto-flow: column</h3> <ul class="sub-menu grid-auto-flow-column"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> <h3>grid-auto-flow: column with grid-template-rows explicitly set</h3> <ul class="sub-menu grid-auto-flow-column grid-template-rows-3"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul>

Answer 1

这是一个很好的答案，为什么无法使用display: grid; . 那么我们为什么要这样做呢？ 我们有这个任务的column-count 。

更多关于 列数和它的附加属性。

 .sub-menu { margin: 0; padding: 2px; list-style: none; border-top: 1px solid; /* goodbye grid */ column-count: 3; }

 <ul class="sub-menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> </ul> <ul class="sub-menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <ul class="sub-menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul>