CSS columns: We can break the content of an element into columns, called CSS columns. We can fill it using the column-fill property. The column-fill property control how the content of the element will break into columns. It takes the values auto, balance, inherit, and initial.
Syntax:
column-fill: balance|auto|initial|inherit;
This example shows how we can break an element into columns:
Example:
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 >
|
Output: