CSS Grid - auto generate new rows breaks on auto-flow-column

Question

I have a css grid containing some links. It is a three col grid, with any number of rows (depending on the number of items).
I would want even distribution for the number of items across each column preferably.

The num of cols and rows are set by:
grid-template-columns: repeat(3, 1fr); // make it three columns wide
grid-template-rows: repeat(auto-fill); // auto generate new rows

This works perfectly, except when I try to make the grid flow by columns, not rows:
grid-auto-flow: column; // this breaks it

Example:

.container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(auto-fill);
  /*grid-auto-flow: column;*/ 
}

a {
  height: 50px;
}


  item one
  item two
  item three
  item four
  item fuve
  item six
  item seven
  item eight
  item nine
  item ten
  item eleven
  item twelve
  item thirteen
  item fourteen
  item fifteen

How can I keep three columns in my grid, make it flow via columns instead of rows and let it auto generate those rows as and when needed?

user_8620333 · Answer

You don't need CSS grid but columns:

.container {
  column-count:3;
}

a {
  height: 50px;
  display:block;
}


  item one
  item two
  item three
  item four
  item fuve
  item six
  item seven
  item eight
  item nine
  item ten
  item eleven
  item twelve
  item thirteen
  item fourteen
  item fifteen

CSS Grid - auto generate new rows breaks on auto-flow-column

1 Answers