Propiedad `column-fill` de CSS

La propiedad column-fill define si las columnas se rellenan de manera uniforme o secuencial.

La propiedad column-fill es una de las propiedades de CSS3.

Cuando se establece una altura en un contenedor de varias columnas, puedes controlar cómo fluye el contenido hacia las columnas. Admite dos valores: balance y auto. balance es el valor predeterminado y divide el contenido de manera uniforme entre las columnas. Con auto, el contenido rellena las columnas de forma secuencial hasta que se cumple la restricción de altura.

Valor inicial	balance
Se aplica a	Elementos Multicol.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.columnFill = "balance";

Sintaxis

css

column-fill: auto | balance | balance-all | initial | inherit;

Ejemplo de la propiedad column-fill con el valor `balance`

html

<!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>

Try it Yourself »

Resultado

CSS column-fill Property

Ejemplo de la propiedad column-fill con el valor `auto`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto {
        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>

Try it Yourself »

Valores

Valor	Descripción
auto	Rellena las columnas de forma secuencial.
balance	Divide el contenido por igual entre las columnas. En medios paginados, solo se equilibra la última página.
balance-all	Divide el contenido por igual entre las columnas. En medios paginados, se equilibran todas las páginas.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento principal.

Práctica

¿Cuál es la función de la propiedad 'column-fill' en CSS?

La propiedad 'column-fill' en CSS se utiliza para especificar cómo se rellenarán las columnas.La propiedad 'column-fill' en CSS se utiliza para especificar el color de las columnas.La propiedad 'column-fill' en CSS se utiliza para especificar el ancho de las columnas.La propiedad 'column-fill' especifica si los cuadros de las columnas se rellenan secuencialmente o equilibran el contenido de manera uniforme en todas las columnas.

Propiedad column-fill de CSS ​

Sintaxis ​

Ejemplo de la propiedad column-fill con el valor balance ​

Resultado ​

Ejemplo de la propiedad column-fill con el valor auto ​

Valores ​