column-count
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
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. <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
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