It's 2021, how can laying stuff out in css / html still be this painful!
That is an actual table so you should use the table elements for it. The default behaviour is a decent starting point, but if you need it to stay aligned when resizing the window, add some fixed widths to the columns.
Right, do you need a extra lib? No. But i thought it might have the feature (varying col per row). If someone wants to link the pure css for that I would be interested to see it. I haven't done that before. I imagine it's similar to what I have seen called a "tree"? But I'm not sure.
What's the maximum number of columns you need? Start there
Perhaps because of the history leading up to 2021, where multiple browsers implementing things differently, and it is expensive to change them to make them behave identically, and dozens have people have tried to harmonize it all but none of those approaches have caught on yet?
I actually don't know, but I'm giving guesses that seem likely to be at least part of the truth.
I feel like I have reasonably simple requirement here, I want to lay stuff out in a grid where each row can have arbitrary columns and I'd like it resize in a sane way. Table looks ok when big and doesnt have much columns: But give it more columns and it all goes pear shaped. I tried using bootstrap grid, which resizes nicer but ends up not handling more than 12 columns nicely and rows with more or less columns than other columns look all wrong. It's so frustrating, feels like this should be simple.
"like it to resize in a sane way" -- seems like there are many different desirable behaviors people might want due to resizing such a thing, yes? If there were only one way, it would probably be more common in its behavior.
this book was one of the best I've found on css, the chapter on grid layout and flexbox layout may be of use here https://www.manning.com/books/css-in-depth