La propiedad de relleno de columna en CSS se usa para especificar si las columnas se llenarán de manera equilibrada o no.
Sintaxis:
column-fill: auto|balance|balance-all|initial|inherit;
Valor por defecto:
- balance
Valores de propiedad:
- balance: Este es el valor predeterminado para la propiedad. Este valor llena cada columna con la misma cantidad de contenido, pero no permitirá que las columnas sean más altas que la altura.
- auto: este valor llena cada columna hasta que alcanza la altura
- balance-todo: Este valor se usa para dividir el contenido equitativamente entre las columnas. En contextos fragmentados, todos los fragmentos están equilibrados.
- initial: este valor se utiliza para establecer la propiedad de relleno de columna en su valor predeterminado.
- heredar: este valor se usa para heredar la propiedad de relleno de columna de su padre.
Ejemplo: Para ilustrar el valor automático y el valor equilibrado para la propiedad de relleno de columna.
html
<DOCTYPE html>
<html>
<head>
<title>The column-fill Property</title>
<style>
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
height: 100px;
}
.gfg1 {
-moz-column-fill: auto;
column-fill: auto;
}
.gfg2 {
-moz-column-fill: balance;
column-fill: balance;
}
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
The column-fill Property
</h2>
<h2>column-fill: auto:</h2>
<div class="gfg1">
The course is designed for students
as well as working professionals to
prepare for coding interviews. This
course is going to have coding questions
from school level to the level needed for
product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
<h2>column-fill: balance (default):</h2>
<div class="gfg2">
The course is designed for students
as well as working professionals to
prepare for coding interviews. This
course is going to have coding questions
from school level to the level needed for
product based companies like Amazon,
Microsoft, Adobe, etc
</div>
</body>
</html>
Producción:
Navegadores compatibles : Los navegadores compatibles con CSS | Las propiedades column-fill se enumeran a continuación:
- Google Chrome 50.0, 4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0, 2.0 -moz-
- Opera 37.0, 15.0 -webkit-, 11.1
- Safari 9.0, 3.1 -webkit-