webcraftsman
commented
6 years ago @captaincoffee It is possible to use CSS Grid for a layout similar to what you propose but it would not work in the use case that you described (the number of items is variable and not fixed). In order to use CSS Grid, you would have to define the number of rows in the grid.
Multiple-column layout would be a better tool for your use case.
I created a pen with examples of using CSS Grid, Flexbox, and multiple-columns to create a column layout. I include it here so that you can see how the type of flow that you want in your layout could be achieved with CSS Grid if you had a fixed number of rows. Grid-auto-flow is the property that you would use to change the default flow of rows to columns. You can read more about it at the MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow.
Note: Flexbox would not work for your use case either. You need to set a fixed height on the Flexbox container in order for the content to flow into more than one column. Flexbox is a one-dimensional solution (row or column, but not both).
captaincoffee
Thank you for providing this space. I need a layout much like described here: https://codepen.io/rachelandrew/pen/zwPEoX except that I need it filled by column, not row. So that on narrow containers/viewprts it would look like: A D B E C F and on wider screens as: A C E B D F etc. Use case: Sitewide Keyword List Page This list will grow as the site does until the list is effectively exhausted (n=unknown).
I cannot get this to work (or I don't know the correct search terms). Is there a property with a default set to rows that I am missing? Any help appreciated.