You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
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 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.
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?
The text was updated successfully, but these errors were encountered: