创建具有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;
}