¿Qué es una rejilla de 12 columnas?

Una rejilla de 12 columnas divide la página en doce columnas de igual ancho separadas por medianiles fijos, y los elementos se dimensionan abarcando columnas enteras: una barra lateral abarca tres, el contenido principal abarca nueve. Las columnas en sí son un andamiaje invisible; lo que el lector percibe es la alineación, porque cada bloque de la página empieza y termina en el mismo pequeño conjunto de bordes.

Ha sido la convención de trabajo en la maquetación de interfaces durante casi dos décadas, y ha sobrevivido a los frameworks que la popularizaron. Este artículo —el ancla de nuestra guía de rejillas de maquetación— explica por qué el número es doce, de dónde viene la convención, cuáles son sus partes y qué aspecto tiene la aritmética con números reales.

¿Por qué doce columnas y no diez o dieciséis?

Divisibilidad. Doce se divide de forma exacta entre 2, 3, 4 y 6, así que las divisiones con las que realmente se construyen las páginas —mitades, tercios, cuartos, sextos— caen todas en columnas enteras:

Diez te compra los quintos —una división que las maquetaciones rara vez piden— a costa de los tercios y los cuartos, que sí piden constantemente. Dieciséis conserva mitades, cuartos y octavos pero pierde los tercios, y los tercios son la columna vertebral de las filas de tarjetas y las secciones destacadas. Doce es el número más pequeño que conserva todas las divisiones a las que los diseñadores recurren habitualmente.

La versión intuitiva: una rejilla solo ayuda mientras la maquetación que quieres cae en columnas enteras. En cuanto un diseño necesita media columna, la rejilla ha dejado de ser una guía y se ha convertido en un obstáculo. Doce hace que ese momento sea raro.

¿De dónde viene la rejilla de 12 columnas?

Los periódicos dividían sus páginas en columnas mucho antes que las pantallas, por razones prácticas: las líneas cortas se componen más rápido y se leen más densas. Josef Müller-Brockmann y la escuela suiza de mediados del siglo XX convirtieron esa práctica en un método de diseño formal: los sistemas de rejilla como el esqueleto racional bajo una página. Después, la web se asentó en el doce en concreto a través de 960.gs y más tarde Bootstrap, cuyas rejillas basadas en clases hicieron de las 12 columnas el vocabulario por defecto de toda una generación de desarrolladores; CSS Grid acabó volviendo innecesaria la maquinaria de los frameworks, y la convención sobrevivió sin ella, porque lo útil siempre fue el acuerdo, no el código.

¿Cuáles son las partes de una rejilla de 12 columnas?

Cuatro, con comportamientos deliberadamente distintos:

• Columnas: las doce unidades fluidas. Su ancho no se elige directamente; es lo que queda después de restar las partes fijas.
• Medianiles: los espacios fijos entre columnas, once en total.
• Márgenes: el espacio fijo a cada lado, entre las columnas más externas y el borde del contenedor.
• Contenedor: el tope de todo el conjunto. Por debajo de su ancho máximo la rejilla es fluida; superado ese punto, la maquetación deja de crecer.

Una sola frase los une: los medianiles y los márgenes se restan primero, y las doce columnas se reparten lo que quede. Esa es toda la aritmética; cuánto deben medir los medianiles y los márgenes es una cuestión de espaciado con sus propias reglas proporcionales.

¿Qué aspecto tiene la aritmética con números reales?

Toma un contenedor de 1200px con medianiles de 23px y márgenes de 32px, siendo tanto el medianil como el margen pasos de una escala de espaciado:

fixed width   = 2 × 32 + 11 × 23 = 64 + 253 = 317px
leftover      = 1200 − 317       = 883px
column width  = 883 ÷ 12         ≈ 73.6px

Ahora proyecta maquetaciones sobre ella. El ancho de un tramo son sus columnas más los medianiles que quedan dentro de él: abarcar absorbe los medianiles que cruza:

El tramo de contenido sale a 8 × 73,6 + 7 × 23 ≈ 750px, y la barra lateral a 4 × 73,6 + 3 × 23 ≈ 363px. Suma el único medianil que aún los separa —750 + 23

• 363 = 1136— y vuelves al contenedor menos sus márgenes (1200 − 64). Las cuentas cuadran en todos los niveles, y eso es lo que hace que una rejilla sea auditable en lugar de aproximada.

Abre esta anatomía de 12 columnas en Scale Composer: las columnas, el medianil, el margen y el contenedor se ajustan por breakpoint en la vista de rejilla, las medidas avanzan por la escala de espaciado compartida con las flechas del teclado, y la aritmética del sobrante se recalcula a medida que avanzas.

¿Cuáles son los patrones de tramo habituales?

Un puñado de patrones cubre la mayoría de las páginas, y todos ellos se desprenden directamente de la tabla de divisibilidad:

Las variantes asimétricas —9 + 3, 7 + 5— son igual de legítimas; cambian las divisiones limpias por un énfasis más particular.

¿Todo tiene que alinearse a las columnas?

No, y esta es la lectura excesiva más común del sistema. La rejilla posiciona contenedores, no sus contenidos. Una tarjeta que abarca cuatro columnas no necesita que su relleno interno, su botón o sus saltos de línea caigan en los bordes de las columnas; dentro de la tarjeta, mandan las propias reglas de espaciado de la tarjeta. Forzar cada elemento interior sobre la rejilla de la página produce maquetaciones técnicamente alineadas y, en la práctica, rígidas. La rejilla de 12 columnas es un acuerdo a nivel de página sobre dónde empiezan y terminan los bloques: el nivel superior de una jerarquía, no una ley que llega hasta lo más profundo.

Coloca tus propios tramos en la rejilla

Los patrones se fijan más rápido cuando los colocas tú mismo. Carga la rejilla de 12 columnas y recorre las maquetaciones de la tabla —8 + 4, luego 6 + 6, luego 4 + 4 + 4— y observa cómo cada tramo absorbe sus medianiles interiores. La exportación CSS de la vista de rejilla escribe la misma aritmética en forma de media queries con las clases .grid y de .col-1 a .col-12, con los tramos limitados al número de columnas del breakpoint activo, de modo que lo que maquetas es lo que se publica: coloca tramos en la rejilla de 12 columnas en Scale Composer.