css - 根据列表项的数量创建具有 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 列。这是添加 列后的样子: 2; -webkit-列: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;
}