Si necesita un número exacto de columnas al diseñar un diseño de varias columnas, utilice column-count.
.lead ( column-count: 3; )Dado el número de columnas, el navegador distribuirá uniformemente el contenido exactamente en ese número de columnas.
Esta propiedad también se puede utilizar como abreviatura de columnsy se puede utilizar junto con column-width. Cuando se declaran ambas propiedades column-countes el número máximo de columnas.
Valores
column-countpuede ser autoo un número entero.
Úselo autosi también está usando column-width. Piense en ello como una forma de decirle al navegador que deje column-widthtomar la iniciativa.
El número entero, también conocido como número de columnas, debe ser mayor o igual que 0.
A diferencia de column-widthesta propiedad, mantendrá el número de columnas independientemente del ancho del navegador. Esto significa que si abrió un diseño de 5 columnas en su teléfono móvil, tendrá un diseño de 5 columnas muy aplastado para navegar. column-countfunciona mejor junto con column-width.
Soporte del navegador
Soporte de diseño de varias columnas:
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3+ | 1.5+ | 11.1+ | 10+ | 81 | 3.2+ |
No olvides tus prefijos si no estás usando una herramienta que te ayude con eso.