Sistema de grillas

[RSmith]

Hola a todos, hace un tiempo quería hacer mi propio sistema de grid responsive, pero tengo unas dudas y queria saber si me pueden ayudar.
Estuve buscando bastante información, pero no encontre respuesta a algunas cuestiones.

Porque casi todos los sistemas de grillas son de 12 columnas ?. Se que hay otros de 16 o mas, pero los mas usados o conocidos son de 12, porque ?

Hay alguna fórmula para calcular el ancho de cada columna en % ? viendo varios sistemas de grid, me di cuenta que muchos usan casi todos los mismos porcentajes para cada columna, como sacan esos números ?
Desde ya muchas gracias!

[Rafael]

Igual que antes de estos sistemas de grillas, la unidad dominante en muchos lugares es base 12. Las horas del reloj, las pulgadas en un pié.

Es divisible entre 1, 2, 3, 4, y 6.

Un sistema por ejemplo base 10 sólo es divisible entre 1, 2 y 5.

[RSmith]

Ah entiendo, muchas gracias rafael! :D
Por casualidad no sabes que formula se usa para sacar esos porcentajes? actualmente estoy usando unos porcentajes que encontré en Internet, pero he visto que muchos sistemas grid usan casi los mismos porcentajes para cada columna. Entiendo que debe de haber alguna forma de calcularlos, pero aún no la encontré

[Rafael]

100% / 12

100% / 2

100% / 3

100% / 4

100% / 6

La cosa es más fácil de lo que parece.

Hace algunos años un sistema popular era el de 960 pixeles.

Igual. Era por que es fácilmente divisible en términos de pixeles.

960/12 = 80

y se veía bien en monitores de 1024x768 px.

Ya no aplica.

En CSS la división es así de simple como te pongo arriba. Una cosa que te recomiendo es que no uses márgenes. Usa padding.

La lógica es muy simple.

En un diseño normal en papel nunca tienes márgenes en realidad como están definidos en CSS. Tienes una hoja normalita y tienes márgenes interiores (padding). A partir de ahí sigue esa lógica. Cada bloque tiene un aire al rededor, pero ese aire es parte del mismo objeto.

Cuando divides tu 100% / 2 por ejemplo es muy claro. 50%.

Pero si usas márgenes tu mismo te complicas. Margen izquierdo 2% + Objeto 46% + Margen derecho 2% = 50%.

Puedes tener hasta 2 decimales en CSS. 33.33%

Aparte de eso está el sistema flexbox, que tendrás que estudiar, pero básicamente no es por porcentajes sino por "partes" como la receta de la abuelita.

Una columna de una parte. Otra columna de dos partes. = 3 partes.

El flex box asignará a la primer columna una de 3 partes; 1/3 y a la segunda 2/3.

[RSmith]

Hola el tema es un poco viejo pero encontré algo que le puede servir a mas de uno para saber calcular los porcentajes de cada columna

Es importante entender que el sistema de grid, por lo general, tiene hasta 12 columnas por fila, es necesario rellenar esta cantidad en cada línea, independientemente del número de columnas que desea. Por ejemplo, si desea sólo una línea con 3 columnas iguales, utilizaría tres elementos en los que cada uno tendrá 4 columnas (4 x 3 = 12). Si se Sobrepa la suma de 12 dará lugar a un salto de columna (s) extra (s) a una nueva línea.

Ya que sabemos la cantidad máxima de columnas, necesitamos determinar el largo/ancho máximo de una columna en particular (1/12) y para eso usamos esta formula:

scw = (100 – (m * (mc – 1))) / mc

Donde:
scw = largo de una columna
m = margen (1.6%)
mc = maximo de columnas (12)

Quando resolvemos esa formula, temos una única columna de 6.86666666667% de ancho. A partir de aqui, podemos usar ese número para calcular los anchos de las columnas restantes. Usamos esta formula:

cw = (scw * cs) + (m * (cs – 1))

Donde:
cw = largo de la columna
scw = largo de una columna sola (6.86666666667%)
cs = numero de la columna (1-12)
m = margen (1.6%)

saludos