Definición de .column-fill utilizado en CSS
Cuando agrega altura a un elemento de múltiples columnas, puede controlar cómo el contenido llena las columnas. El contenido se puede equilibrar o llenarse secuencialmente.
Ejemplo de uso : propiedad CSS column-fill
Si te gustaría utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de la siguiente forma:
ul {
height: 300px;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
-moz-column-fill: balance;
column-fill: balance;
}Otro ejemplo más avanzado de .column-fill es el siguiente de CODEPEN:
Sintaxis de .column-fill en CSS
column-fill: balance|auto|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| balance | Valor por defecto. Rellena cada columna con aproximadamente la misma cantidad de contenido, pero no permitirá que las columnas sean más altas que la altura (por lo tanto, las columnas pueden ser más cortas que la altura ya que el navegador distribuye el contenido de manera uniforme horizontalmente) | |
| auto | Llena cada columna hasta que alcance la altura, y haz esto hasta que se quede sin contenido (por lo tanto, este valor no necesariamente llenará todas las columnas ni las llenará de manera uniforme) | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .column-fill
Los números de la tabla especifican la primera versión del navegador que es absolutamente 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-gap (in Multiple Columns) | 50 | 10 | 52 | 10 | 37 |
| column-gap (in Grid) | 66 | 16 | 61 | 12 | 53 |
| column-gap (in Flexbox) | 84 | 84 | 63 | 14.1 | 70 |
