The used value for 'column-count' is calculated without -regard for explicit column breaks or constrained column lengths, +regard for explicit column breaks or constrained column heights, while the actual value takes these into consideration.
Column gaps and rules are placed between columns in the same multicol element. The length of the column gaps and column rules -is equal to the length of the columns. Column gaps take up space. That +is equal to the column height. Column gaps take up space. That is, column gaps will push apart content in adjacent columns (within the same multicol element). @@ -1699,12 +1702,11 @@
There are two strategies for filling columns: columns can either be balanced, or not. If columns are balanced, user agents should try to -minimize the variation in content between columns, while also trying to -minimize the overflow content. If columns are not balanced, they are -filled sequentially; some columns may end up partially filled, or with -no content at all. In any case, user agents must honor forced page -breaks and should try to honor 'widows', 'orphans' and other -properties that may affect column lengths. +minimize variations in column height, while honoring forced breaks, +'widows' and 'orphans', and other properties that may affect column +heights. If columns are not balanced, they are filled sequentially; +some columns may end up partially filled, or with no content at all. +
In continuous media, this property does not have any effect in -overflow columns (see below). +overflow columns. + +
In this example, an article only has one short paragraph which fits +on three lines. The three lines are displayed in three different +columns due to column balancing. + +
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+
+
+
+Ab cde fgh i jkl. Mno
+
pqr stu vw xyz. A bc +
def g hij klm. +
In this example, column balancing is turned off: + +
+article { width: 60em; height: auto; columns: 4; column-fill: auto }
+
+
+As a result, the first column is filled with all content: + +
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm.
+
In this example, an article has two paragraphs: first a long one, then a shorter one. This code is applied: + +
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+p { break-after: column }
+
+
+The shortest column height possible contains five lines of text. After the column height has been established, columns are filled sequentially. As a result, the third column is as high as the first two columns, while the last column ends up being significantly shorter. + +
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. Pqrstu vw
+
+x yz. Abc def ghi jkl.
+M nop qrst uv wx yz.
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm.
+
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. Pqrstu vw
+
+x yz. Abc def ghi jkl.
+M nop qrst uv wx yz.
+
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+
+
+In this example, an article starts with an unbreakable figure which sets the column height. Subsequent content is filled sequentially into the remaining columns: + + +
+
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. Pqrstu vw
+x yz. Abc def ghi jkl.
+M nop qrst uv wx yz.
+
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno.
+
Floated or in-flow content that extends into column gaps (e.g., -long words or images) is clipped in the middle of the column gap. + + +
Floated or in-flow content that extends into column gaps or neighboring columns — e.g., +long words or images — is not clipped and may therefore cause overflow. +
In this example, the black image is wider than the column, and is -therefore clipped. +
In this example, the black image is wider than the column:
Lorem ipsum dolor
sit amet. Nam at jus.
@@ -1792,7 +1980,7 @@