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.

https://xkcd.com/927/

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

Given the numerous ways you could have set up that table don't think I could help. If it's not too late, you could use a prebuilt table?

If your using react "Table API - Material-UI" https://material-ui.com/api/table/

@U013YN3T4DA use pure flex-box CSS, no extra libs. The React Native guide is the best in terms of clarity and conciseness that I’ve found; it finally allowed me to “get” flex-box; I still refer to it very frequently; I realize you’re probably not doing this in RN, but all the flex-box rules should work identically in the browser (with the one note that the default flex-direction is different in RN) https://reactnative.dev/docs/flexbox

The nice part of this guide is that it’s structured in order of importance; I.e. make sure you understand :justifyContent and :alignItems first

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