[eternityforest]

Make flexbox the default layout for everything, and add a flex-snap feature that will snap to the nearest multiple of some given size. I'm not sure we actually would still need grids.

I also wonder if you couldn't have a more transparent and parameterizable auto width algorithm based on a lowest cost solver.

So you could say "If this element wraps, it's cost 50", meaning you want all the boxes to stay on as few lines as possible. Or "Every em of height this element has is cost 10, if anything triggers a scrollbar, that's cost 100".

Maybe instead of flex-grow, you'd just add negative cost to the width of something.

You could have alternate rulesets so the browser could choose one or the other for lowest overall page cost.

Also, class inheritance. I don't see why that's not a thing. "Not needing processors" should be a pretty big design goal.

[felixfbecker]

Nothing stops you from adding `<style> * { display: flex }</style>` to your index.html

[4death4]

How would your flex box solution handle a simple two column layout where the first column is a variable size? There isn’t a fixed multiple to “snap” to.

[eternityforest]

Didn't think of that case!

But if you had a full algebra/constraints/logic programming system, you could set a solver rule where the first column items had width X, with fairly high priority.

And other rules(like fit-content) on that same property, to specify what the width should be.

The solver would figure out what X should be, and everything in the first column would have that width unless something even more important changed it.

You could even give rules a "layer" in addition to the solver cost, and properties would only take rules from the highest active layer, so you could still do overriding, just explicitly instead of with specificity.

To avoid confusion with different CSS files, layer could be a hierarchal tuple, and you could manually specify the layer of an imported file, forcing all its layers to become sub layers of the one you specified, so you could override a file, or merge two files in one layer, etc.

[maxloh]

Maybe add `flex: 1` to the second column?

[eternityforest]

The second column can't always just be a tall column shaped div, because you probably want to reflow 12, 34, 56, 78 on mobile where you don't have room for 2 columns, to something like 12345678, not 13572468

[maxloh]

You can reorder flex children with the CSS `order` property.

https://developer.mozilla.org/en-US/docs/Web/CSS/order

[onion2k]

You could snap to a percentage width.

[maxloh]

I like this idea.

Would that impact performance negatively?

[eternityforest]

Looks like someone actually tested it, flex is a bit slower but not terribly slower. https://stackoverflow.com/questions/39463220/does-deep-nesti...

I'm guessing the solver engine would need lots of work to optimize, but I've never implemented that kind of thing so I don't quite know. I'm not even sure what kind of library could handle it. Something like OptaPlanner?