In need of someone better than me at Grid
Please forgive the rudementary MS Paint drawing (I can do better if it is unclear).
I'm doing a tree UI where each node of the tree has an openable drawer.
I'd like to have it so that each Red element spans two "rows" but whose width takes up as little room as needed. The Orange and Blue need to split along the gridline at a consistent, but fluid, point,
and the blue needs to span both columns, but start after the red.
I've tried putting a float on the red (turns out float doesn't work on grid children, which, makes sense)
and I've been racking my brain at doing some subgrid jiggery-pokery, but I'm hitting a wall.
I know I can have the last column be an explicit width, but is this layout possible with fractional column width?
4 Replies
My end goal, more or less, is to "push" the left-side of this drawer to the right to kind of "nest" it underneath the item it's related to while also being able to extend the dotted lines downwards to meet up with the rest of the tree.
The dotted lines are a solved problem, it's just the variable width of that first column and the fact that the tree lines need to span two rows
https://codepen.io/chooking/pen/MWxPgOY
I used 33.33% instead of 1fr. I can't find a way to get the math to work with fr, but 1fr is 33.33% in a container that has a total of 3fr width.
It is possible to make this 2 columns instead of 3. Doing that will allow using fr units. However, the overlap in the first column is problematic. It is possible to use calc to give sufficient space for the red box, but this requires having a known size for it.
yea, that seems like the way to go, don't think you can get around using the %
Nice! Thank you both
that ended up doing perfectly fine - I don't have the tree quite up to snuff to show it off, but the layout is solid