Columnas CSS: Podemos dividir el contenido de un elemento en columnas, llamadas columnas CSS. Podemos llenarlo usando la propiedad column-fill . La propiedad de relleno de columna controla cómo el contenido del elemento se dividirá en columnas. Toma los valores auto, saldo, herencia e inicial.
Sintaxis:
column-fill: balance|auto|initial|inherit;
Este ejemplo muestra cómo podemos dividir un elemento en columnas:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
}
.gfg1 {
column-fill: auto;
}
.gfg2 {
column-fill: balance;
}
.gfg3 {
column-fill: initial;
}
.gfg4 {
column-fill: inherit;
}
</style>
</head>
<body>
<h1>What are css columns and how to fill it?</h1>
<h2>column-fill: auto</h2>
<div class="gfg1">
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
</div>
<h2>column-fill: balance (default)</h2>
<div class="gfg2">
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
</div>
<h2>column-fill: initial</h2>
<div class="gfg13">
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
</div>
<h2>column-fill: inherit</h2>
<div class="gfg4">
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
GeeksforGeeks is my favorite site
where I can gain a lot of knowledge
and can also share my knowledge what
I have gained while learning. We can
add more paragraphs for content.
This is just an example to tell you
about column in css.
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA