Generador CSS multicolumna

Qué es el diseño multicolumna CSS

El módulo CSS Multi-column Layout (la especificación W3C «CSS Multi-column Layout Module Level 1») redistribuye automáticamente el contenido de un mismo elemento en dos o más columnas, igual que la imprenta de periódicos y revistas ha tratado los textos largos durante siglos. Declaras cuántas columnas quieres (o el ancho deseado de cada columna) y el navegador distribuye el contenido de arriba abajo, de izquierda a derecha, equilibrando el número de líneas para que cada columna termine aproximadamente a la misma altura. El módulo se convirtió en Candidate Recommendation del W3C en abril de 2011 y llegó de forma utilizable a los navegadores entre Firefox 3.5 (junio de 2009) e IE 10 (octubre de 2012). Es una característica básica de la plataforma web desde hace más de una década. A diferencia de Flexbox o Grid (que alinean elementos hijos discretos en posiciones conocidas) el diseño multicolumna trata el contenido como un único flujo continuo que el navegador secciona en columnas según la altura disponible.

Cuándo las columnas CSS son la herramienta adecuada

• Texto largo en pantallas anchas. Leer texto a una sola columna de más de unos 75 caracteres cansa la vista, la mirada debe recorrer demasiada distancia para encontrar el inicio de la siguiente línea. El diseño a dos columnas reduce a la mitad la longitud de línea usando el mismo espacio vertical, y mejora drásticamente la legibilidad en pantallas anchas.
• Listas de definiciones y glosarios. Las listas alfabéticas largas de elementos cortos se distribuyen de forma natural en varias columnas sin necesidad de equilibrarlas a mano.
• Listas de enlaces en el pie de página. El clásico pie con docenas de enlaces (categorías hacia abajo, enlaces a lo ancho) encaja perfectamente con column-count.
• Listas de características y enumeraciones. Una lista larga que se desplazaría sin fin en una sola columna se lee mucho mejor en dos o tres.
• Hojas de estilo para impresión. El diseño multicolumna es una de las pocas funciones CSS que se traduce maravillosamente al papel, el formato mismo que los periódicos usan desde su invención.

column-count vs column-width, la distinción más importante

Dos formas de especificar columnas, y la elección importa para el diseño responsive. column-count: 3 codifica tres columnas, a cualquier ancho de viewport, el navegador produce exactamente tres columnas, que se estrechan a medida que el contenedor se reduce. En un móvil, tres columnas se vuelven franjas finas e ilegibles. column-width: 250px pide en cambio columnas «de al menos 250 píxeles de ancho»; el navegador calcula cuántas caben en el contenedor y reorganiza automáticamente cuando cambia la viewport. Pantallas anchas reciben muchas columnas, estrechas pocas o una, sin una sola media query. El patrón combinado es la mejor práctica moderna: columns: 250px 4 (atajo de column-width más column-count) significa «columnas de 250 px de ancho, pero nunca más de 4». El navegador produce 4 columnas en un escritorio amplio, menos en una tablet, una sola en un móvil, responsive automático. La mayoría del CSS de producción usa esta forma combinada por su robustez.

Controlar dónde se corta el contenido

Por defecto el navegador corta las columnas donde caigan, lo que a veces separa un encabezado de su primer párrafo o parte una tarjeta por la mitad. La propiedad CSS break-inside: avoid (CSS Fragmentation Module Level 3) dice al navegador «no cortes este elemento entre columnas», se aplica típicamente a tarjetas, figuras y todo contenido que debe permanecer junto. break-before: column fuerza un corte de columna antes de un elemento, útil para «empezar cada sección en una nueva columna». column-span: all hace que un encabezado o cita se extienda a todo el ancho, saliendo del flujo de columnas, típico para el título del artículo encima de un cuerpo multicolumna.

Trampas a vigilar

El diseño multicolumna tiene interacciones sutiles que conviene conocer. El orden de lectura en los lectores de pantalla sigue el orden del DOM, que generalmente coincide con el orden visual de columna superior a inferior, pero la tecnología asistencial puede confundirse a veces en diseños complejos. La paginación al imprimir con multicolumna puede producir equilibrios extraños entre saltos de página; pruébalo con una hoja de estilo para impresión si te importa la salida en papel. El contenido largo se rellena hacia abajo: si das a un contenedor multicolumna una altura fija menor de la que el contenido necesita, se desborda; si no restringes la altura, el navegador equilibra las columnas a alturas aproximadamente iguales. El contenido anclado (formularios, elementos interactivos que deben quedarse en un sitio) funciona mal en columnas porque el usuario no sabe dónde mirar. Mezclar con Grid o Flexbox en el mismo nivel produce resultados imprevisibles, elige un solo método de diseño por contenedor.

Propiedades CSS generadas

• column-count: número explícito de columnas (fijo, no se adapta al viewport)
• column-width: ancho mínimo de columna (el navegador calcula cuántas caben, totalmente responsive)
• column-gap: espacio horizontal entre columnas; el valor por defecto de 1em suele bastar
• column-rule: línea vertical decorativa entre columnas (ancho, estilo, color, como un borde)
• column-span: all: aplicado a un encabezado o cita para abarcar todo el ancho de todas las columnas