How do I use “flex-flow: column wrap”?

March 8, 2023 by Tarik

If you don’t know the height of each item or how many items you will have, a more flexible solution is this:

.parent {
  column-count: 4
}
.child {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

You may also need to adjust margin-top of .child:first-child if they don’t align to the top.