Definición de .column-count aplicado en CSS
Si necesita un número exacto de columnas al diseñar un diseño de múltiples columnas, use .column-count.
Ejemplo de uso de la propiedad column-count
Esta propiedad de CSS habitualmente se utiliza de la siguiente manera:
.lead {
column-count: 3;
}Otro ejemplo más avanzado de .column-count es el siguiente de CODEPEN:
Sintaxis de .column-count en CSS
column-count: number|auto|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| número | El número óptimo de columnas en las que fluirá el contenido del elemento. | |
| auto | Valor por defecto. El número de columnas estará determinado por otras propiedades, como por ejemplo, "column-width" | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .column-count
Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- | 10.0 7.0 -webkit- | 37.0 |
