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

<integer> | auto

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
Mediavisual
Valor calculadocomo se especifica
Animation typean integer
Canonical orderper grammar

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
column-countChrome Soporte completo 50
Soporte completo 50
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Soporte completo 52
Soporte completo 52
Soporte completo 1.5
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas Prior to version 37, multiple columns didn't work with display: table-caption elements.
IE Soporte completo 10Opera Soporte completo 11.1
Soporte completo 11.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari Soporte completo 9
Soporte completo 9
Soporte completo 3
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 50
Soporte completo 50
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 50
Soporte completo 50
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 52
Soporte completo 52
Soporte completo 4
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas Prior to version 37, multiple columns didn't work with display: table-caption elements.
Opera Android Soporte completo 11.1
Soporte completo 11.1
Soporte completo 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari iOS Soporte completo 9
Soporte completo 9
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android Soporte completo 5.0
Soporte completo 5.0
Soporte completo 1.0
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-

Leyenda

Soporte completo  
Soporte completo
Ver notas de implementación.
Ver notas de implementación.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también

Última actualización:

, by MDN contributors
Temas relacionados