column-count

La propiedad CSS column-count divide el contenido de un elemento en el número de columnas indicado.

Sintaxis

/* Keyword value */
column-count: auto;

/* <integer> value */
column-count: 3;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;

Valores

auto
El número de columnas es determinado por otras propiedades CSS, como column-width.
<integer>
Es un <integer> estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad column-width se establece a un valor que no sea auto, se limitará a indicar el número máximo permitido de columnas.

Sintaxis formal

Ejemplos

HTML

<p class="content-box">
  This is a bunch of text split into three columns
  using the CSS `column-count` property. The text
  is equally distributed over the columns.
</p>

CSS

.content-box {
  column-count: 3;
}

Resultado

Especificaciones

Especificación Estado Comentario
CSS Multi-column Layout Module
La definición de 'column-count' en esta especificación.
Working Draft Definición inicial

Valor inicialauto
Applies toBlock containers except table wrapper boxes
Heredableno
Valor calculadocomo se especifica
Animation typean integer

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también