Cuando desee mantener sus columnas en un ancho específico, use column-width.
section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )El navegador calculará cuántas columnas de al menos ese ancho pueden caber en el espacio. Piense column-widthen una sugerencia de ancho mínimo para el navegador.
column-widthes una propiedad flexible. Una vez que el navegador no puede caber al menos 2 columnas en su ancho especificado, las columnas se detendrán y caerán en una sola columna.
Esta propiedad también se usa en la forma abreviada de columnsy se puede usar junto con column-count. Cuando se declaran ambas propiedades column-countes el número máximo de columnas.
Valores
Se puede establecer column-widthque autoo una longitud.
Úselo autosi también está usando column-counto si necesita apagar la propiedad. Piense en ello como una forma de decirle al navegador que column-counttome la iniciativa.
Para especificar el ancho de las columnas, use una longitud mayor que (o igual a) 0. Puede usar cualquier unidad CSS excepto el porcentaje.
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+ | 2.3+ | 6.1+ |
¡No olvides tus prefijos!