Lately I'm developing some frontend product and, coming from the backend world, I come across elements that are widely used but that are new to me.
Lately I'm being surprised by the way to define the columns when defining the horizontal space that an element should occupy. One can use a 100% space, but also indicate how many columns it occupies. And there the maximum value to use is 12.
I understand that 12 is a good number because it has a multitude of divisors (2, 3, 4, 6 in addition to itself and 1, of course), so it allows for easy block making: three elements that occupy the same space, six elements occupy the same, etc.
Reading about it I find references precisely to this, to the number of divisors, but I don't know if I'm missing something.
Is there any more underlying or historical reason that justifies this fact? Why is 12 used and not 15, 16 or 20, which also have many divisors?
The reason is the greater flexibility adjusted to the lesser complexity
We must start from the point that the 12-column system is a convention , not a standard , so there may be systems that work with another number of columns because it is more efficient for them or because it is more adjusted to their peculiarities. .
Bootstrap initially worked with a 16-column system, but they found that it had certain limitations that a 12-column system doesn't. And what are these limitations? Less flexibility, mostly.
As you can see, a 12-column system allows us a greater number of dividers, so we can achieve a greater combination of possibilities, which, after all, is what we are looking for.
And why not opt for a system with more columns? Because another of the things that is sought is simplicity. We could have a more precise system (with a higher number of divisors) using a system with more than 12 columns, but what we gain in flexibility we would lose in ease of use.