Back to the index.
This page tests the column-fill property.
Balancing columns is the default. That is, the browser divides the content equally over the defined columns, and if there’s whitespace at the bottom of the element, so be it.
So the columns below should have equal height, even though that means an empty space at the bottom.
It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.
This is the second paragraph. We’ll try to break columns just before or after it.
Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.
If we add this bit of code, the columns are balanced. Then again, this is the default.
column-fill: balance;
It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.
This is the second paragraph. We’ll try to break columns just before or after it.
Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.
If we add this bit of code, the columns are not balanced, but the text stretches to the bottom of the column. In this example that means that the third column will go unused.
column-fill: auto;
It’s not often that you have to write a completely useless text that goes on for lines and lines. Still, I’d love to take up the challenge and see how quickly I can bore you. In the break tests we’ll be going to lengths to avoid a column break in this paragraph.
This is the second paragraph. We’ll try to break columns just before or after it.
Finally, in the third paragraph we continue our leisurely discussion of nothing in particular, so that we can see how the columns behave when text goes on and on and on.