creating grid with 2 columns and auto number of rows based on number of list items

Question

This CSS Grid stuff is hard! I am trying to create a basic 2 column grid layout from my list of items. It should auto decide the number of rows based on the number of list items. I have it working and looking nicely except it fills in the row first then goes down to the next row. I want it to fill in the entire column first then go to the next column. So I thought I could just add grid-auto-flow: column; to my ul. But for some reason that turns it into just one row.

Here is the CSS I currently have:

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

I have tried just using css3 columns. Here is what it looks like with adding columns: 2; -webkit-columns: 2; -moz-columns: 2; to the ul.

And here is what it looks like with my grid code:

UPDATE: Turns out I had those list items floated left from some other css. I got it to work with CSS columns after all. Still wish someone could tell me how to do it with grid.

Here is my final CSS code I used to get it looking good

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;
}