Propiedad CSS column-fill
Usa la propiedad CSS column-fill para especificar si las columnas se rellenarán de forma equilibrada o no. Valores: balance. Ejemplos prácticos.
La propiedad column-fill controla cómo se distribuye el contenido entre las columnas de un diseño multicolumna — ya sea repartido uniformemente entre todas las columnas, o volcado secuencialmente en una columna a la vez.
Es una de las propiedades de CSS3 y funciona junto con column-count y columns para crear diseños al estilo de un periódico.
Cuándo usarla
column-fill solo tiene un efecto visible cuando el contenedor multicolumna tiene una altura fija (por ejemplo, height: 200px). Sin un límite de altura, el navegador no tiene motivo para dejar de rellenar una columna, por lo que ambos valores se ven idénticos.
Existen dos valores con significado concreto:
balance(el valor por defecto) intenta que todas las columnas tengan aproximadamente la misma longitud, de modo que el bloque de columnas luzca uniforme y el contenido termine aproximadamente en la misma línea en cada una. Esto es lo que normalmente querrás para un texto legible al estilo periodístico.autorellena la primera columna hasta la altura total del contenedor, luego pasa a la siguiente, y así sucesivamente. La última columna puede ser mucho más corta que el resto. Úsalo cuando el orden visual de las columnas importe más que el equilibrio.
| Valor inicial | balance |
|---|---|
| Se aplica a | Elementos multicolumna. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.columnFill = "balance"; |
Sintaxis
column-fill: auto | balance | balance-all | initial | inherit;Ejemplo de la propiedad column-fill con el valor balance
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="balance">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Resultado
Con balance, el texto se distribuye de forma que las cuatro columnas terminan aproximadamente a la misma altura.
Ejemplo de la propiedad column-fill con el valor auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
height: 200px;
column-count: 3;
column-rule: 1px solid black;
column-fill: auto;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="auto">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Aquí el contenedor tiene una altura fija de height: 200px. Con auto, la primera columna se rellena hasta esa altura antes de que el texto fluya hacia la siguiente, por lo que las columnas posteriores pueden ser más cortas — o estar vacías si el texto se agota.
Valores
| Valor | Descripción |
|---|---|
| auto | Rellena las columnas de forma secuencial. |
| balance | Divide el contenido de forma equitativa entre las columnas. En medios paginados, solo se equilibra la última página. |
| balance-all | Divide el contenido de forma equitativa entre las columnas. En medios paginados, todas las páginas se equilibran. |
| initial | Establece la propiedad en su valor por defecto. |
| inherit | Hereda la propiedad del elemento padre. |
Compatibilidad con navegadores
column-fill es compatible con todos los navegadores modernos. Ten en cuenta que balance-all tiene soporte limitado, y en muchos motores auto se comporta como balance a menos que el contenedor multicolumna esté fragmentado (por ejemplo, paginado o con altura fija).
Propiedades relacionadas
column-count— define cuántas columnas crear.columns— atajo paracolumn-widthycolumn-count.column-rule— dibuja una línea entre las columnas.