La propiedad CSS column-count
divide el contenido de un elemento en el número de columnas indicado.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 propiedadcolumn-width
se establece a un valor que no seaauto
, 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 inicial | auto |
---|---|
Applies to | Block containers except table wrapper boxes |
Heredable | no |
Valor calculado | como se especifica |
Animation type | an integer |
Compatibilidad con navegadores
BCD tables only load in the browser