Cuando agrega altura a un elemento de varias columnas, puede controlar cómo el contenido llena las columnas. El contenido se puede equilibrar o completar secuencialmente.
ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )Esta propiedad solo está disponible en Firefox. Firefox equilibrará automáticamente el contenido en un diseño de varias columnas con restricciones de altura. Los otros navegadores siempre llenarán las columnas de forma secuencial cuando se les dé una restricción de altura.
Para que Firefox se comporte como los otros navegadores, es decir, para llenar las columnas de forma secuencial, puede configurar column-fill: auto.
Valores
column-fillacepta los valores de la palabra clave balancey auto.
balancellenará cada columna con aproximadamente la misma cantidad de contenido, pero no permitirá que las columnas crezcan más que el height. Es posible que descubra que las columnas serán más cortas que el heightya que el navegador distribuye el contenido de manera uniforme horizontalmente.
autollenará cada columna hasta que llegue al heighty haga esto hasta que se quede sin contenido. Dado el contenido, este valor no necesariamente llenará todas las columnas ni las llenará de manera uniforme.
Es como echar jugo en vasos. Puede verter una cantidad igual de jugo en cada vaso y descubrir que no llena cada vaso hasta el borde ( balance). Alternativamente, puede llenar un vaso hasta el tope hasta que esté lleno y repetir esto hasta que no quede jugo. Como resultado, los vasos restantes pueden tener menos o ningún jugo ( auto).
Vea el ejemplo de relleno de columna de Pen (CSS-Tricks) por CSS-Tricks (@ css-tricks) en CodePen.
Soporte del navegador
Los column-fillvalores de las palabras clave funcionan específicamente en Firefox. No funcionaron en agosto de 2014 cuando se escribió originalmente esta entrada de Almanac, pero lo hace cuando se prueba nuevamente en agosto de 2015 (Chrome 44). Durante esa prueba, parece que cambiar el valor dinámicamente no tomaría, tuvo que forzar un relevo.
Soporte del navegador para el diseño de varias columnas en general:
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
¡No olvides tus prefijos!