Medianiles y huecos: el espaciado entre columnas

Un medianil es el espacio entre columnas en una rejilla de maquetación — la distancia que el CSS moderno llama gap. Las anchuras habituales son 16px en móviles y 24px en tablets y escritorio, y en una maquetación sistematizada el medianil no es un número a medida sino un paso de la escala de espaciado, elegido por breakpoint.

La palabra es mucho más antigua que el CSS, y las reglas para dimensionarla son proporcionales en lugar de fijas. Este artículo cubre de dónde viene el término, qué anchura deben tener los medianiles, cómo el trío columna–medianil–margen divide una página, y el CSS que lo implementa — un rincón del sistema de espaciado más amplio.

¿Por qué se llama medianil?

Herencia de la imprenta. En un libro encuadernado, el medianil es el margen interior donde se encuentran dos páginas enfrentadas — el canal de espacio en blanco que corre hacia el lomo. Los sistemas de rejilla tipográficos tomaron prestada la palabra para el espacio entre dos columnas de texto cualesquiera, y la maquetación digital la heredó de aquellas rejillas de imprenta junto con casi todo su vocabulario de columnas. El CSS, al estandarizar la propiedad décadas después, eligió el nombre más llano: gap. Los diseñadores tienden a decir medianil (gutter), las hojas de estilo dicen gap; ambos nombran la misma distancia.

¿Qué anchura debe tener un medianil?

Las respuestas habituales son 16px en móvil y 24px en tablet y escritorio, y son valores por defecto razonables que salen directamente de la rejilla de 8 puntos. Pero los números fijos ocultan la regla real, que es proporcional. Un medianil se dimensiona en relación con dos vecinos:

• La anchura de columna. Algo así como entre un cuarto y un tercio de una columna separa con claridad — lo bastante ancho para que las columnas contiguas no se confundan entre sí, lo bastante estrecho para que la página no se rompa en tiras.
• El margen de página. El medianil no debería superar al margen. Cuando lo hace, la maquetación se desborda por los bordes: las columnas más externas quedan más cerca del borde del viewport que de sus propias vecinas.

El mecanismo perceptual detrás de ambas reglas es la agrupación por proximidad, en el vocabulario de la Gestalt: las cosas separadas por menos espacio se leen como pertenecientes a un mismo grupo. Las columnas se mantienen unidas como una sola página porque el espacio entre ellas es visiblemente menor que el espacio a su alrededor. Invierte esa relación y las columnas externas empiezan a agruparse con el borde del viewport en lugar de entre sí.

¿Cómo se relacionan columnas, medianiles y márgenes?

Los tres miembros del trío tienen comportamientos deliberadamente distintos:

Una fórmula los une: anchura de columna = (contenedor − 2 × margen − (n − 1) × medianil) ÷ n. Los miembros fijos se restan primero; las columnas se reparten lo que queda. Por eso los medianiles y los márgenes son pasos naturales de la escala mientras que las anchuras de columna rara vez lo son — las columnas son donde la aritmética se flexiona.

¿Qué aspecto tienen los números reales a 4, 8 y 12 columnas?

Usando la escala de espaciado generada a partir de una base de 16px, razón 2 y dos notas por duplicación — 8, 11, 16, 23, 32, 45, 64 — el paso más cercano al convencional 24 es 23 (16 × 2^(1/2) = 22,63, redondeado):

Las sumas cuadran línea por línea: 4 × 73,75 + 3 × 16 + 2 × 16 = 375, y 12 × 73,58 + 11 × 23 + 2 × 32 = 1200. Dos cosas merecen atención. Las anchuras de columna oscilan entre 73 y 77px en los tres breakpoints — dispositivos distintos, columnas que se sienten iguales — mientras que la proporción medianil-columna se mantiene dentro de la banda de un cuarto a un tercio (16 / 73,75 ≈ 22% en móvil, 23 / 73,6 ≈ 31% en escritorio). Y el margen nunca baja por debajo del medianil.

Abre esta rejilla de tres breakpoints en Scale Composer — la vista de rejilla usa por defecto 4, 8 y 12 columnas por breakpoint dentro de un ancho máximo de contenedor global, con medianiles y márgenes tomados de la misma escala que todo lo demás.

¿Cuál es el CSS de un medianil?

grid-template-columns declara las columnas; gap es el medianil:

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* columnas fluidas */
  gap: 23px;                               /* medianil — un paso de la escala */
  max-width: 1200px;                       /* contenedor */
  padding-inline: 32px;                    /* margen de página, un paso arriba */
  margin-inline: auto;
}

Las columnas 1fr son el miembro fluido del trío: el navegador ejecuta la misma aritmética del sobrante que la tabla de arriba, en cada anchura de viewport. gap también funciona en flexbox y en la maquetación multicolumna, y admite una forma de dos valores — gap: 32px 23px establece por separado los huecos de fila y de columna, algo que empieza a importar en cuanto una rejilla se envuelve en más de una fila. Antes de que gap llegara a grid y flexbox, los medianiles se falseaban con márgenes en las columnas y un margen negativo en el contenedor — un patrón que conviene reconocer en bases de código antiguas, no repetir.

Recorre los medianiles por la escala

Las reglas de dimensionado se fijan más rápido cuando la maquetación se mueve. Carga el breakpoint de escritorio y recorre el medianil por los pasos vecinos de la escala — 16, 23, 32 — con el margen fijado en 32: a 16 las doce columnas empiezan a apretarse, y a 32 el medianil alcanza al margen y la página empieza a perder su marco. Una pulsación de tecla por paso es todo el experimento — recorre los medianiles y los márgenes por la escala con las teclas de flecha en Scale Composer.