column-count

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

Pruébalo

Sintaxis

css

/* 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 (en-US).
<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 (en-US) se establece a un valor que no sea auto, se limitará a indicar el número máximo permitido de columnas.

Sintaxis formal

column-count = 
  auto             |
  <integer [1,∞]>

Ejemplos

HTML

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

css

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

Resultado

Especificaciones

Specification
CSS Multi-column Layout Module Level 1 # cc

Compatibilidad con navegadores

BCD tables only load in the browser