I realize this may not directly answer or help with your question, but maybe there’s something in it for you:
With Flexbox and Grid being an option for me (I’m able to disregard non-supporting browsers), I usually ‘roll my own’ in terms of not using a grid-y framework at all. I moved away from the conceptual styling models of Bootstrap and the like by separating styles into a large collection of primitive classes (large meaning a lot of them), like .txt-bld, .txt-it, or .d-f.fd-r.f-ai-c (meaning something along the lines of display: block; flex-direction: row; align-items: center), and a few ‘trumps’ for unique/special elements on the page (usually below 10).
This has enabled me to only ‘name’ a component/element of the UI when I build the actual Reagent/… component, and has reduced mismatches between naming in CSS and ‘behavioral’ components. Anytime I felt I needed a ‘traditional’ CSS framework it immediately brought back all sorts of problems related to conceptual mismatches between styling and logic, which ultimately made the code much harder to understand/work with, and probably more costly in the long run.