search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

Vertical flow of unknown number of items (know column count, unknown row count) #158

Closed drk4 closed 5 years ago

drk4 commented 5 years ago

The problem is that I have 3 columns but the number of items is unknown. These should be placed evenly across the columns but flowing vertically down each column. eg. 1 4 7 2 5 8 3 6

I've looked everywhere and as far as I can see it is only possible to use the vertical grid-auto-flow:column when the number of rows is known.

The suggested alternate is to use CSS columns.

However I would like to benefit from css grids space saving alignment of block items on tracks rather than having to set a min-height on block items and inevitably resulting in wasted extra space where a block item's content is shorter than others.

Is it still the case that CSS grid is unable to do this?

Would a solution combining it with some JS be recommended?

webcraftsman commented 5 years ago

@drk4 You could use JavaScript to update a CSS variable to make it work. https://codepen.io/webcraftsman/pen/BgLzrv Otherwise you would have to use CSS columns.

The default behavior for grid-auto-flow is "row". So to create a grid, you have to define the number of columns. So the same is true when you want to use grid-auto-flow: column. It is just the way that auto flow works.

drk4 commented 5 years ago

Thanks @webcraftsman thats really helpful and should work for what I need to do.

webcraftsman commented 5 years ago

@drk4 As I was thinking about this more, I realized that you don't even need your column declaration. This is the same when you use the default auto-flow of rows. You normally set the columns and the rows auto layout for as many as needed for the items you have. We are setting the number of rows dynamically through the script.