根据列表项的数量创建具有 2 列和自动行数的网格

Question

这个 CSS Grid 东西很难！我正在尝试从我的项目列表中创建一个基本的 2 列网格布局。它应该根据列表项的数量自动决定行数。我让它工作并且看起来很好，除了它先填充行然后下降到下一行。我希望它先填写整个列，然后转到下一列。所以我想我可以将grid-auto-flow: column; 添加到我的ul 中。但由于某种原因，它变成了一行。

这是我目前拥有的 CSS：

ul.dept-list{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));}

我尝试过只使用 css3 列。这是将columns: 2; -webkit-columns: 2; -moz-columns: 2; 添加到ul 后的样子。

这是我的网格代码的样子：

更新：原来我让那些列表项从其他一些 css 向左浮动。毕竟，我让它与 CSS 列一起工作。仍然希望有人能告诉我如何使用网格。

这是我用来让它看起来不错的最终 CSS 代码

ul.dept-list{columns:2;-webkit-columns:2;-moz-columns:2;height:auto;}

ul.dept-list li{display:block;width:250px;float:none;}

ul.dept-list li a.dropdown-item{padding:.25rem .5rem;}

Answer 1

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}