6XC

Generador de Columnas CSS

Distribuye el texto en columnas al estilo periódico — número, espacio y línea divisoria — con vista previa en vivo y CSS.

788 visitas

El diseño multi-columna hace que el texto largo fluya lado a lado como en una página de periódico. Cambia el número y el espacio, y observa cómo este texto de ejemplo se reorganiza al instante. Activa la línea para dibujar un fino divisor entre columnas. En artículos largos acorta la longitud de línea, lo que facilita la lectura. El diseño multi-columna hace que el texto largo fluya lado a lado como en una página de periódico. Cambia el número y el espacio, y observa cómo este texto de ejemplo se reorganiza al instante. Activa la línea para dibujar un fino divisor entre columnas. En artículos largos acorta la longitud de línea, lo que facilita la lectura.

Diseño Multi-Columna en CSS

column-count divide el contenido de un bloque en columnas iguales al estilo de un periódico; column-gap define el espacio entre ellas y column-rule dibuja una línea divisoria (misma sintaxis que border). El texto fluye automáticamente de una columna a la siguiente — ideal para artículos largos, pies de página y listas de índice. Usa break-inside: avoid en los elementos que no quieras que se dividan entre columnas.

Preguntas Frecuentes

¿column-count o column-width?

column-count fija cuántas columnas obtienes; column-width deja que el navegador ajuste tantas columnas de al menos ese ancho como sea posible — mejor para diseños responsivos. Puedes usar ambas a la vez.

¿Cómo evito que un elemento se divida entre columnas?

Dale break-inside: avoid; — útil para tarjetas, imágenes con leyenda y elementos de lista.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar