Switching from grid-auto-flow: column; to row in gridception?
How is it possible to kind of (or actually) do a responsive switch from grid-auto-flow: column behavior to row (with random widths) for all rows at once (if the maxcontent of all grids together doesn't fit in one line)? (1.1.1 cannot break to a new line alone, also 1.1 and 2.1 should break at the same time, either all intermediate containers stacked or none).
I might want to "switch" the innermost grid from column to row, too, when it's really narrow (never in "column"-mode though), but that's not really important.
Also, how do I create horizontal alignment between 1.1/1.2 and 2.1 in "row"-mode? Subgrid maybe? (I guess I could make this work eventually myself but I don't have an idea how to do a responsive "switch" between column and row mode, so I might as well mention this here)
example
6 Replies
Can't really follow. Perhaps if you draw outlines for each of the responsive states it's easier to visualize
Did you have a look at the example link?
Yeah but i dont really know hoe you are trying to collapse this down
I also only looked on mobile, perhaps it renders differently on desktop?
It has absolute widths, so technically it can be viewed on mobile but it's not easy to see it all
The difference between .wide and .narrow is static in the css so you would be able to see both states, if you could make tgem out on mobile
I guess I'll just do it with javascript
I have asked chatgpt already how to figure out the widths and all, but I haven't had the time to actually try it out yet
Currently, there is no way to detect when there is enough/not enough room and completely change things. If you know the widths of things, container queries do open up some doors though.
Yeah, I almost expected this to be the case, there will be content that will define the width, so I was going for the maxcontent... It seems to be possible to solve this with javascript, which is fine for me, but it would've been cleaner with pure css 🙂
This is yet an other thing where the houdini css layout api could come in handy... But we will probably have to wait an other few years for that 😦
and even if it lands in chrome, gecko or safari don't seem to be very keen on implementing that too 😦