CSS Multi-column Layout Test Page

Each frame below is one multi-column container. Compare column count/width/rule placement against the label.

1 — column-count: 2, short entries

columns: 2; column-rule: 0.5pt solid #000

entry-1 — a short definition for entry number 1, just long enough to wrap onto a second line in a narrow column.

entry-2 — a short definition for entry number 2, just long enough to wrap onto a second line in a narrow column.

entry-3 — a short definition for entry number 3, just long enough to wrap onto a second line in a narrow column.

entry-4 — a short definition for entry number 4, just long enough to wrap onto a second line in a narrow column.

entry-5 — a short definition for entry number 5, just long enough to wrap onto a second line in a narrow column.

entry-6 — a short definition for entry number 6, just long enough to wrap onto a second line in a narrow column.

entry-7 — a short definition for entry number 7, just long enough to wrap onto a second line in a narrow column.

entry-8 — a short definition for entry number 8, just long enough to wrap onto a second line in a narrow column.

entry-9 — a short definition for entry number 9, just long enough to wrap onto a second line in a narrow column.

entry-10 — a short definition for entry number 10, just long enough to wrap onto a second line in a narrow column.

2 — column-count: 3, colored rule

column-count: 3; column-rule: 2px dashed #c0392b; column-gap: 20px

entry-1 — a short definition for entry number 1, just long enough to wrap onto a second line in a narrow column.

entry-2 — a short definition for entry number 2, just long enough to wrap onto a second line in a narrow column.

entry-3 — a short definition for entry number 3, just long enough to wrap onto a second line in a narrow column.

entry-4 — a short definition for entry number 4, just long enough to wrap onto a second line in a narrow column.

entry-5 — a short definition for entry number 5, just long enough to wrap onto a second line in a narrow column.

entry-6 — a short definition for entry number 6, just long enough to wrap onto a second line in a narrow column.

entry-7 — a short definition for entry number 7, just long enough to wrap onto a second line in a narrow column.

entry-8 — a short definition for entry number 8, just long enough to wrap onto a second line in a narrow column.

entry-9 — a short definition for entry number 9, just long enough to wrap onto a second line in a narrow column.

3 — column-width (auto column count)

column-width: 140px; column-rule: 1px dotted #2980b9 (as many columns as fit)

entry-1 — a short definition for entry number 1, just long enough to wrap onto a second line in a narrow column.

entry-2 — a short definition for entry number 2, just long enough to wrap onto a second line in a narrow column.

entry-3 — a short definition for entry number 3, just long enough to wrap onto a second line in a narrow column.

entry-4 — a short definition for entry number 4, just long enough to wrap onto a second line in a narrow column.

entry-5 — a short definition for entry number 5, just long enough to wrap onto a second line in a narrow column.

entry-6 — a short definition for entry number 6, just long enough to wrap onto a second line in a narrow column.

entry-7 — a short definition for entry number 7, just long enough to wrap onto a second line in a narrow column.

entry-8 — a short definition for entry number 8, just long enough to wrap onto a second line in a narrow column.

4 — page-spanning columns

columns: 2; enough entries to overflow onto a second page, still 2 columns wide there

entry-1 — a short definition for entry number 1, just long enough to wrap onto a second line in a narrow column.

entry-2 — a short definition for entry number 2, just long enough to wrap onto a second line in a narrow column.

entry-3 — a short definition for entry number 3, just long enough to wrap onto a second line in a narrow column.

entry-4 — a short definition for entry number 4, just long enough to wrap onto a second line in a narrow column.

entry-5 — a short definition for entry number 5, just long enough to wrap onto a second line in a narrow column.

entry-6 — a short definition for entry number 6, just long enough to wrap onto a second line in a narrow column.

entry-7 — a short definition for entry number 7, just long enough to wrap onto a second line in a narrow column.

entry-8 — a short definition for entry number 8, just long enough to wrap onto a second line in a narrow column.

entry-9 — a short definition for entry number 9, just long enough to wrap onto a second line in a narrow column.

entry-10 — a short definition for entry number 10, just long enough to wrap onto a second line in a narrow column.

entry-11 — a short definition for entry number 11, just long enough to wrap onto a second line in a narrow column.

entry-12 — a short definition for entry number 12, just long enough to wrap onto a second line in a narrow column.

entry-13 — a short definition for entry number 13, just long enough to wrap onto a second line in a narrow column.

entry-14 — a short definition for entry number 14, just long enough to wrap onto a second line in a narrow column.

entry-15 — a short definition for entry number 15, just long enough to wrap onto a second line in a narrow column.

entry-16 — a short definition for entry number 16, just long enough to wrap onto a second line in a narrow column.

entry-17 — a short definition for entry number 17, just long enough to wrap onto a second line in a narrow column.

entry-18 — a short definition for entry number 18, just long enough to wrap onto a second line in a narrow column.

entry-19 — a short definition for entry number 19, just long enough to wrap onto a second line in a narrow column.

entry-20 — a short definition for entry number 20, just long enough to wrap onto a second line in a narrow column.

entry-21 — a short definition for entry number 21, just long enough to wrap onto a second line in a narrow column.

entry-22 — a short definition for entry number 22, just long enough to wrap onto a second line in a narrow column.

entry-23 — a short definition for entry number 23, just long enough to wrap onto a second line in a narrow column.

entry-24 — a short definition for entry number 24, just long enough to wrap onto a second line in a narrow column.

entry-25 — a short definition for entry number 25, just long enough to wrap onto a second line in a narrow column.

entry-26 — a short definition for entry number 26, just long enough to wrap onto a second line in a narrow column.

entry-27 — a short definition for entry number 27, just long enough to wrap onto a second line in a narrow column.

entry-28 — a short definition for entry number 28, just long enough to wrap onto a second line in a narrow column.

entry-29 — a short definition for entry number 29, just long enough to wrap onto a second line in a narrow column.

entry-30 — a short definition for entry number 30, just long enough to wrap onto a second line in a narrow column.

entry-31 — a short definition for entry number 31, just long enough to wrap onto a second line in a narrow column.

entry-32 — a short definition for entry number 32, just long enough to wrap onto a second line in a narrow column.

entry-33 — a short definition for entry number 33, just long enough to wrap onto a second line in a narrow column.

entry-34 — a short definition for entry number 34, just long enough to wrap onto a second line in a narrow column.

entry-35 — a short definition for entry number 35, just long enough to wrap onto a second line in a narrow column.

entry-36 — a short definition for entry number 36, just long enough to wrap onto a second line in a narrow column.

entry-37 — a short definition for entry number 37, just long enough to wrap onto a second line in a narrow column.

entry-38 — a short definition for entry number 38, just long enough to wrap onto a second line in a narrow column.

entry-39 — a short definition for entry number 39, just long enough to wrap onto a second line in a narrow column.

entry-40 — a short definition for entry number 40, just long enough to wrap onto a second line in a narrow column.

5 — dictionary-style (mirrors css4.pub's Icelandic dictionary)

columns: 2; column-rule: 0.2pt solid black; text-align: justify; large centered heading as first child

A

word-1 — a short definition for word number 1, just long enough to wrap onto a second line in a narrow column.

word-2 — a short definition for word number 2, just long enough to wrap onto a second line in a narrow column.

word-3 — a short definition for word number 3, just long enough to wrap onto a second line in a narrow column.

word-4 — a short definition for word number 4, just long enough to wrap onto a second line in a narrow column.

word-5 — a short definition for word number 5, just long enough to wrap onto a second line in a narrow column.

word-6 — a short definition for word number 6, just long enough to wrap onto a second line in a narrow column.

word-7 — a short definition for word number 7, just long enough to wrap onto a second line in a narrow column.

word-8 — a short definition for word number 8, just long enough to wrap onto a second line in a narrow column.

word-9 — a short definition for word number 9, just long enough to wrap onto a second line in a narrow column.

word-10 — a short definition for word number 10, just long enough to wrap onto a second line in a narrow column.

word-11 — a short definition for word number 11, just long enough to wrap onto a second line in a narrow column.

word-12 — a short definition for word number 12, just long enough to wrap onto a second line in a narrow column.

word-13 — a short definition for word number 13, just long enough to wrap onto a second line in a narrow column.

word-14 — a short definition for word number 14, just long enough to wrap onto a second line in a narrow column.