Look at all the major CSS frameworks and you'll quickly discover that they all are based on a 12 column responsive grid. Most use Flexbox, some use CSS Grid. Some even use both. I recently inspected the code of one CSS Framework and discovered they had written the CSS Grid portion to completely mimic their 12 column Flexbox code. Same style of focusing on a single row, 12 columns, same offsets.
Ask the question in tech discussions and you get responses like modularity, scalable, flexible, symmetry and balance, browser support. Those are all valid. Look back through history. The first grids were based on tables. Next came floats. When Flexbox was first released, it seemed to be the answer all designers and coders were looking for. Tables had their own issues including lack of flexibility. Floats introduced a whole new set of issues. Both were not geared to supporting the growing browser base like tablets and smart phones. Flexbox seemed to solve that. At the time, a 12 column grid seemed to have the granularity that could easily work into almost any design.
Myself and my company have created thousands of web sites. Not once did we ever create a 12 column design. They were always fractions. Some were awkward like wanting a 22% left column and then three equal columns to the right. How does 22% and 78% calculate into a grid based on 12 columns?
Of course there are work arounds to this. One enterprising developer came up with a solution based on a CSS calc(). Others used nesting with a hard coded 22% on the first width, and then used 78% on the second width ... and inside the 78% div, nested a three equal columns grid based on Flexbox.
This is one of the reasons that CSS Grid makes a lot more sense. Using CSS Grid is so flexible in defining columns. Here's how simple it is to create a responsive grid based on the above 22%/78% requirement:
grid-template-columns: 22% 1fr 1fr 1fr;
(or alternately: grid-template-columns: 22% repeat(3, 1fr);
You can easily mix up measurement units as shown in either of the line above. Use %, use calc(), em, rem, px, or fr. By the way, "fr" is a new unit of measurement introduced for CSS Grid. It was created by the Mozilla Foundation. "fr" means fraction or fractional.
CSS Grid even introduces the concept of minimum and maximum values for a column width. The syntax is: minmax(min,max). So you could write:
grid-template-columns: minmax(22%, 150px) repeat(3, 1fr);
... which would mean: if resizing window, the first column mininum is 22% of the screen value and maximum is 150px (whichever applies) and the next three columns are equal size of what is remaining. Flip that the other way:
grid-template-columns: minmax(150px, 22%) repeat(3, 1fr);
... which would mean the first column mininum is 150px of the screen value and maximum is 22% (whichever applies) ... other three columns are the same.
If we design to column quantities that we actually use, it gets really simple, really quick. You can define the core of a grid and call that by a class. You can even have a default number of columns, say two equal size columns. If you need something different, change in the style. That would make the use of style appropriate to the task. An example would be <div class="mygrid" style="grid-template-columns: repeat(3, 1fr);"> ... and that would apply strictly to this div.