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-widthse 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