CSS3 multicol tests

Basic column layout

Tests 1-4 should all have three columns, and they should look identical.

columns: 3

column-count: 3

columns: 200px

column-width: 200px

Reducing the number of columns

In the two tests below, the multicol element is not wide enough for tree columns (due to a column gap, and the width of the content area, respectively), and the content will therefore be laid out in 2 columns. The two tests should look very similar. (They are, however, not identical: test #5 has a 1px gap between columns, and the multicol element of test #6 has a width of 598px instead of 600px.)

column-gap: 1px; column-width: 200px

box-sizing: border-box; column-width: 200px

Column gaps

column-width: 200px; column-gap: 200px

In this test, there should be two columns with a 200px gap between them. The visual effect is that it looks like there is an empty middle column in between the two columns.

Basic column rules

The two tests below should look identical. They both have a 3-column textual layout identical to tests 1-4. Also, they have a 1px lime-colored rule between the columns.

column-rule: 1px solid lime

column-rule-width: 1px; column-rule-style: solid; column-rule-color: lime

Column rule styles

The tests below are identical, except that the column-rule-style differs.

column-rule: 10px lime none

column-rule: 10px lime hidden

column-rule: 10px lime dashed

column-rule: 10px lime solid

column-rule: 10px lime double

column-rule: 10px lime groove

column-rule: 10px lime ridge

column-rule: 10px lime inset

column-rule: 10px lime outset

Column rule widths

column-rule: thin lime solid

In the test below, the column rule should be as as wide as the border around this word.

The two tests below should look identical.

column-rule: 500px solid lime

background: lime

Balanced columns

The two tests and the reference rendering below should look identical; each column should have one sentence.

column-fill: balance

column-fill: balance

Balanced columns & constrained height

Below there is one test and one reference rendering. They should look alike.

height: 10em; column-fill: balance

Constrained heights

column-count: 2; height: 8em

In this test, the height of the multicol element is constrained and the content of the multicol element no longer fits. Therefore, more columns are created outside the multicol element, in the inline direction. Below, there should be two columns with a yellow background. These two colums should be centered, with a third column added on the right side. The third column should not have a yellow background. There should be a 1px green rule between all three columns.

Column breaks

Below are two tests and one reference rendering simulated with a table. These two tests have column breaks before and after their paragraphs, respectively. All three renditions should have three columns with one paragraph in each column.

break-before: column

break-after: column

Column breaks with overflow

There should be four columns below. The first three columns should be inside the multicol box, while the last column should be in the overflow area outside the multicol box. All four columns should have the same content.

break-after: column

Column spans

Below is one test and one reference rendering. The body text should be laid out in 2x2 columns, with the headling between them. The two renditions should look the same.

column-span: all