Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
drk4 opened this issue Jun 18, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@drk4
Copy link

commented Jun 18, 2019

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

This comment has been minimized.

Copy link

commented Jun 18, 2019

@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

This comment has been minimized.

Copy link
Author

commented Jun 19, 2019

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

@drk4 drk4 closed this Jun 19, 2019

@webcraftsman

This comment has been minimized.

Copy link

commented Jun 22, 2019

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.