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…
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.
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.