11

Últimamente estoy desarrollando algún producto de frontend y, viniendo del mundo del backend, me encuentro con elementos ampliamente utilizados pero que para mí son nuevos.

Últimamente me está sorprendiendo la forma de definir las columnas a la hora de definir el espacio horizontal que debe ocupar un elemento. Uno puede utilizar un espacio 100%, pero también indicar cuántas columnas ocupa. Y allí el valor máximo a utilizar es 12.

Entiendo que 12 es un buen número porque tiene multitud de divisores (2, 3, 4, 6 además de él mismo y del 1, claro), por lo que permite hacer bloques de forma fácil: tres elementos que ocupen lo mismo, seis elementos que ocupen lo mismo, etc.

Leyendo al respecto encuentro referencias precisamente a esto, al número de divisores, pero no sé si se me escapa algo.

¿Hay algún motivo más de fondo o histórico que justifique este hecho? ¿Por qué se usa 12 y no 15, 16 o 20, que también tienen multitud de divisores?

1
  • 1
    hasta donde yo conozco no existe ningún otro motivo. Simplemente es un estándar esto no significa que tu no puedas usar otro grid-system de 16 columnas (que ya existen) o hacer el tuyo propio. El de 12 columnas es el mas conocido por que librerias como Bootstrap es el que utilizan.
    – x3k
    Commented el 21 may. 2019 a las 9:16

1 respuesta 1

11

El motivo es la mayor flexibilidad ajustada a la menor complejidad

Hay que partir del punto de que el sistema de 12 columnas se trata de una convención, no de un estandar, por lo que puede haber sistemas que funcionen con otro número de columnas porque para ellos resulte más eficiente o porque se ajusta más a sus peculiaridades.

Bootstrap inicialmente funcionaba con un sistema de 16 columnas, pero vieron que tenía ciertas limitaciones que un sistema de 12 no tiene. ¿Y cuales son estas limitaciones? Una menor flexibilidad, mayormente.

16 columnas: 1, 2, 4, 8, 16

12 columnas: 1, 2, 3, 4, 6, 12

Como se puede ver, un sistema de 12 columnas nos permite un mayor número de divisores, por lo que podremos conseguir una mayor combinación de posibilidades, que al fin y al cabo es lo que se busca.

¿Y por qué no optar por un sistema de más columnas? Porque otra de las cosas que se busca es la simplicidad. Podríamos tener un sistema más preciso (con mayor número de divisores) usando un sistema de más de 12 columnas, pero lo que ganamos en flexibilidad lo perderíamos en facilidad de uso.

8
  • Qué interesante, muchas gracias. O sea que incluso la respuesta a mi pregunta es eso, la simplicidad. ¿Sabes si hay algún debate histórico (a nivel github o similar) en el que se pueda ver puntos de vista y cómo se llegó al 12?
    – fedorqui
    Commented el 21 may. 2019 a las 9:44
  • 1
    He estado buscando pero las discusiones que hay no me dicen nada. Me aventuraría a decir que se eligió el 12 por una cuestión matemática, ya que es un número relativamente pequeño que goza de muchos divisores. Si fuésemos desde el número 1 hacia adelante, comprobando los divisores de cada número seguramente llegaríamos a la misma conclusión.
    – phpMyGuel
    Commented el 21 may. 2019 a las 9:51
  • Veo que en 2011 con Bootstrap 2 se pasó de 16 a 12 y luego veo a un gurú del tema explicando el porqué de 12 y el argumento es este, puramente numérico. Supongo que fue ensayo-error hasta llegar al número mágico.
    – fedorqui
    Commented el 21 may. 2019 a las 10:04
  • Eso parece, y no es el primer sitio en el que veo lo del "número mágico". Es gracioso el apelativo. Lo llego a saber y respondo con un simple "Porque 12 es mágico" :)
    – phpMyGuel
    Commented el 21 may. 2019 a las 10:07
  • Lo de número mágico lo utilicé un poco a la ligera :) Siendo estrictos, se trata de aquel número que se puede expresar como suma de dos cubos, de dos formas diferentes más info. Dicho lo cual, las propiedades matemáticas del 12 son abundantes y potentes, más que cualquier número de su alrededor inmediato.
    – fedorqui
    Commented el 21 may. 2019 a las 10:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.