Propiedad CSS column-count

La propiedad column-count especifica el número de columnas en que se dividirá el contenido de un elemento. Forma parte del módulo de diseño multicolumna de CSS, que permite que un único bloque de contenido fluya automáticamente a través de varias columnas — como en un periódico o revista — sin necesidad de dividir el marcado a mano.

Esta página explica qué hace column-count, su sintaxis y los valores que acepta, ejemplos ejecutables, cómo funciona junto con las demás propiedades de columna y los aspectos a tener en cuenta.

Qué hace `column-count`

column-count acepta un entero positivo o la palabra clave auto. auto es el valor predeterminado.

Cuando se establece en un valor numérico (por ejemplo 3), el navegador intenta dividir el contenido en exactamente ese número de columnas de igual anchura.
Cuando se establece en auto, el número de columnas lo determinan otras propiedades — principalmente column-width. Si no se establece ni column-count ni column-width, el contenido se renderiza como una sola columna.

Si se definen ambos column-count y column-width, column-count actúa como un máximo: el navegador ajusta tantas columnas de al menos column-width como pueda, pero nunca más de column-count. Esta combinación es el patrón responsive recomendado, y el atajo columns establece ambos a la vez.

¿Cuándo usarlo?

El diseño multicolumna es ideal para textos continuos y largos en orden de lectura — artículos, páginas de términos y condiciones, listas de enlaces — donde se desea que el contenido ocupe el ancho disponible en columnas equilibradas. No es una cuadrícula de propósito general: para maquetaciones bidimensionales usa CSS Grid o Flexbox en su lugar.

Valor inicial	auto
Se aplica a	Contenedores de bloque excepto cajas envolventes de tablas.
Heredado	No.
Animatable	Sí. El número de columnas es animable.
Versión	CSS3
Sintaxis DOM	object.style.columnCount = "4";

Sintaxis

Sintaxis de la propiedad column-count

column-count: <integer> | auto | initial | inherit;

Ejemplo de la propiedad column-count:

Ejemplo de la propiedad CSS column-count con el valor auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: auto;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad column-count con un valor numérico:

Ejemplo de la propiedad CSS column-count con un valor numérico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Con column-count: 7, el navegador divide el mismo párrafo en siete columnas. Si el contenedor es demasiado estrecho para dar a cada columna una anchura útil, las columnas quedarán muy finas — que es exactamente por qué combinar column-count con column-width (o el atajo columns) suele ser mejor opción que un número fijo.

Trabajar con las demás propiedades de columna

column-count rara vez actúa sola. Estas propiedades complementarias dan forma a las columnas resultantes:

Propiedad	Qué controla
`column-width`	La anchura ideal de cada columna. Combinada con `column-count`, limita el número de columnas a un máximo.
`column-gap`	El espacio entre columnas.
`column-rule`	Una línea dibujada entre columnas (como un `border`, pero en el espacio entre ellas).
`columns`	Atajo para establecer `column-width` y `column-count` a la vez.
`column-span`	Permite que un elemento (como un encabezado) abarque todas las columnas.
`column-fill`	Si el contenido se equilibra uniformemente entre columnas o llena cada columna sucesivamente.

Una receta común y robusta es establecer una anchura objetivo y un número máximo de columnas al mismo tiempo:

.article {
  column-width: 14rem;   /* aim for ~14rem-wide columns */
  column-count: 3;       /* but never more than 3 */
  column-gap: 2rem;
}

Aspectos a tener en cuenta

Solo números enteros. column-count no acepta fracciones ni unidades — 2.5 y 200px son inválidos. Usa column-width cuando quieras pensar en términos de anchuras.
Es un máximo, no una garantía. Cuando column-width también está establecido, el navegador puede renderizar menos columnas de las indicadas en column-count si no hay espacio suficiente.
El contenido puede cortarse entre columnas. Usa la propiedad break-inside (break-inside: avoid) para evitar que elementos como figuras o ítems de lista se dividan en el límite entre columnas.
Animable pero raramente animado. El valor puede transicionarse, pero refluir el texto en un número diferente de columnas es visualmente abrupto, por lo que apenas se usa en animaciones.

La propiedad column-count es compatible con todos los navegadores modernos. Internet Explorer 10–11 y versiones antiguas de Safari requerían los prefijos -ms- / -webkit-; hoy la propiedad sin prefijo es segura de usar.

Valores

Valor	Descripción	Pruébalo
auto	El número de columnas lo determinan otras propiedades. Este es el valor predeterminado de la propiedad.	Pruébalo »
`<integer>`	Especifica el número exacto de columnas en que debe fluir el contenido.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'column-count'?

Establece el número de columnas en un diseño multicolumna.Establece el espacio entre las columnas del diseño.Establece el color de las columnas del diseño.Establece la anchura de las columnas del diseño.Controla cómo desborda el contenido de su contenedor.

Qué hace column-count