Varias columnas CSS

Optional Advanced acaba de cubrir image sprites — una hoja, muchas teselas. Esta sesión es otra herramienta opcional: varias columnas. Piensa en un periódico, no en una barra de herramientas. Pides a CSS que vierta un artículo largo en dos o tres chorros verticales. No estás colocando tarjetas independientes en un Grid.

Respuesta directa

El diseño multi-columna CSS parte un bloque de contenido que fluye — casi siempre texto largo — en columnas de periódico. Fijas cuántas (column-count), un ancho cómodo (column-width), el canal (column-gap) y una raya vertical opcional (column-rule). Texto, listas y contenido en línea llenan la primera columna y luego la siguiente. Úsalo para copia larga. Para navegación, mazos de tarjetas y el armazón de página, quédate con Flexbox o Grid para que cada caja siga siendo una unidad entera.

Por qué existen las columnas

Las líneas muy largas se leen mal. Las revistas lo resolvieron con varias columnas más cortas en una página. CSS copió la idea para la web: un elemento, un chorro de texto, salto automático a columnas. Eso no es Flexbox (una fila o columna de ítems) ni Grid (un mapa bidimensional de áreas). Multi-columna es una herramienta de fragmentación: el navegador puede partir un párrafo en el borde de columna si no se lo impides.

Recuento: «quiero tres columnas»

column-count pide un número. El navegador reparte el ancho del contenedor entre esas columnas (menos huecos):

En un artículo ancho ves tres chorros. En un móvil estrecho, tres columnas flacas se vuelven ilegibles: acompáñalo con una media query, o prefiere column-width para que el recuento baje cuando falte espacio.

Ancho: «cada columna más o menos así»

column-width es una pista, no una jaula de píxeles. El navegador crea tantas columnas de al menos ese ancho como quepan:

Si la caja ronda 48rem más huecos, quizá veas tres columnas; si encoge, dos y luego una. Suele ser más calmado que un column-count: 3 fijo en cada viewport. Puedes poner ambos: el recuento es un máximo, el ancho un mínimo cómodo. El atajo columns es primero ancho y luego recuento, por ejemplo columns: 16rem 3.

Hueco y regla

Las columnas necesitan aire. column-gap es el canal. column-rule dibuja una línea fina ahí (ancho, estilo, color — como un borde, pero no ocupa espacio extra de layout como el borde de una caja):

Hay atajos parciales (column-rule-width, column-rule-style, column-rule-color). Mantén la raya sutil; es un divisor de periódico, no un segundo sistema de diseño.

Un título que abarca

Un encabezado a menudo debe sentarse a todo el ancho y las columnas empiezan debajo. column-span: all en un hijo lo hace:

En el día a día usas none y all. El span es para título, figura principal o llamada — no para cada párrafo.

Que las cajas no se partan

Una tarjeta, una figura con pie o una cita se ve rota si el salto de columna la corta por la mitad. break-inside: avoid pide al navegador mantener esa caja en una columna cuando pueda:

También sirven break-before / break-after en flujos tipo impresión, y el antiguo page-break-inside: avoid como respaldo. No ganarás cada pelea — cajas muy altas siguen desbordando — pero el objetivo habitual es que el pie se quede con la imagen. column-fill: balance (a menudo el valor por defecto) iguala alturas; auto llena primero la primera columna (más como un salto de periódico).

Columnas vs Flex vs Grid

Los módulos de Flexbox y Grid ya enseñaron a colocar ítems. Multi-columna no te da justify-content ni áreas con nombre. Fluye un chorro. Si cada hijo debe seguir siendo un rectángulo que se puede pulsar, usa Flex o Grid.

El cromo de página se queda en Flex o Grid

No conviertas todo el sitio en column-count: 3. Cabecera, nav y mazo de tarjetas quieren cajas enteras:

.prose puede ser multi-columna. .card-deck no. Mezclar ambos en el mismo elemento parte figuras y deja botones en el chorro equivocado.

Pantallas estrechas y orden de lectura

Si las columnas quedarían más finas que una línea cómoda (unos 12–16rem de texto), baja a una columna. Lectores de pantalla y teclado siguen el orden del documento, no «bajar una columna y luego la siguiente» como barrido visual — bien para un artículo, raro si finges un dashboard de widgets sueltos con columnas. En idiomas RTL las columnas se llenan según el modo de escritura; la raya sigue en el canal.

Pruébalo tú

1. Envuelve unos párrafos en .prose y pon column-count: 2 más un column-gap.
2. Cambia a column-width: 16rem y redimensiona la ventana: mira cómo cambia el recuento.
3. Añade column-rule: 1px solid en un gris discreto.
4. Pon un <h2> con column-span: all.
5. Envuelve una figura en break-inside: avoid. Luego aplica el mismo CSS a una rejilla de tarjetas y verás por qué Flex/Grid es más calmado ahí.

Errores frecuentes

• Usar multi-columna como galería de tarjetas o layout de página entera
• Forzar column-count: 3 en el móvil hasta que cada línea tenga tres palabras
• Olvidar column-gap y pegar los chorros
• Dejar que imagen y pie se partan en el borde de columna
• Tratar las columnas como Flex: no hay flex-grow para un chorro de columnas
• Confundirlo con sprites: el sprite recorta un fondo; las columnas fragmentan texto

Resumen

• Multi-columna vierte un chorro en columnas de periódico
• column-count es un número; column-width un mínimo cómodo; se pueden combinar
• column-gap y column-rule visten el canal; títulos con column-span: all
• break-inside: avoid mantiene figuras y llamadas enteras cuando se puede
• Flex y Grid siguen dueños del cromo de página y de los mazos de tarjetas
• Optional Advanced continúa después con enmascarado (masking)