Multi-column Sample

Dictionary Layout

The following example shows how to create a basic multi-column document with two columns, balanced content and a small gap.

Peace, n.: 1. Calm, repose, quiet, tranquillity, stillness, silence.; 2. Amity, concord, harmony, truce, ARMISTICE.
Peaceable, a.: 1. Peaceful, pacific, free from war.; 2. Gentle, mild, amicable, friendly, disposed to peace, not quarrelsome.; 3. Quiet, tranquil, placid, unmoved, undisturbed, serene.
Peaceful, a.: 1. Quiet, calm, still, undisturbed, placid, tranquil, serene.; 2. Mild, gentle, kindly, friendly.
Peace-maker, n.: Mediator, intercessor.
Peace-making, a.: Conciliatory, mild, appeasing.
Peace-offering, n.: 1. Atonement, satisfaction, amends, reparation, atoning sacrifice.; 2. Mediation, olive-branch, intercession.
Peak, n.: Top (of a mountain), summit, crest, crown, pinnacle.
Peak, v. n.: 1. Grow thin or lean, become emaciated.; 2. Sneak, make a mean figure.
Peaked, a.: Pointed.
Peal, n.: Blast, burst, blare, clang.
Peal, v. n.: Resound, echo, re-echo, boom, thunder, roar.
Pea-nut, n.: Ground-nut, earth-nut (Arachis hypogæa).
Pearlash, n.: Sub-carbonate of potassa (impure), calcined potash.
Pearl-powder, n.: Pearl-white.
Pearl-white, n.: Pearl-powder, sub-muriate of bismuth.
Pearly, a.: 1. Abounding in pearls.; 2. Clear, pure, transparent, nacreous.
Peasant, n.: Rustic, countryman, hind, swain.
Pebble, n.: Stone (of small size), pebble-stone.
Pebble-stone, n.: Pebble.
Peccability, n.: Frailty, infirmity, weakness, liability to sin.
Peccable, a.: Frail, weak, imperfect, erring, sinning, liable to sin.
Peccadillo, n.: Petty fault, slight offence.
Peccant, a.: 1. Sinning, erring, guilty, criminal.; 2. Morbid, malignant, corrupting, corroding.
Peculation, n.: Embezzlement.
Peculiar, a.: 1. That specially pertains, that belongs exclusively.; 2. Singular, particular, characteristic, special, exceptional, rare, not common, not general.
Peculiarity, n.: Individuality, idiocrasy, idiosyncrasy, characteristic, speciality, singularity.
Pecuniary, a.: Monetary, financial.
Pedagogue, n.: [A contemptuous term.] Schoolmaster, teacher.
Pedant, n.: Pretender to learning.
Pedantic, a.: Conceited, pragmatical, vain of knowledge, ostentations of learning.

Excerpt from "Dictionary of English Synonymes" by Richard Soule via Project Gutenberg: http://www.gutenberg.org/files/38390/38390-h/38390-h.htm

div.dictionary{
    height 6in; /* if not set the box shrinks to the balanced column's height */
    column-count: 2; /* defines two columns */
    column-gap: 0.25in; /* defines the gap width */
    ...
}

Journal Layout

In this example the columns are defined by width and their content is laid out to fully fill each column before beginning the next rather than balancing all column heights equally. The gap is a little bigger, to leave room for written side-notes.

Monday, 8th.
Fresh Breezes and Cloudy weather the most part of these 24 hours. At 10 a.m. weighed and came to sail; at Noon the South Foreland bore North-East 1/2 North, distant 6 or 7 Miles. Wind West by North, North-West.

Tuesday, 9th.
Gentle breezes and Cloudy weather. At 7 p.m. the Tide being against us, Anchored in 13 fathoms of Water; Dungeness South-West by West. At 11 a.m. Weighed and made Sail down Channel; at Noon, Beachy Head, North by East 1/2 East, distant 6 Leagues, Latitude observed 50 degrees 30 minutes North. Wind North-West to North.

Wednesday, 10th.
Variable: light Airs and Clear weather. At 8 p.m. Beachy Head North-East by East, distant 4 Leagues, and at 8 a.m. it bore North-East by North, 9 Leagues. Found the Variation of the Compass to be 23 degrees West; at Noon the Isle of Wight North-West by North. Wind West by North, North-East by East.

Thursday, 11th.
Light Airs and Clear weather. At 8 p.m. Dunnose North by West 5 Leagues, and at 4 a.m. it bore North-North-East 1/2 East, distant 5 Leagues. Wind Variable.

Excerpt from "Captain Cook's Journal, First Voyage", Chapter 1 "England to Rio Janeiro" by James Cook via Project Gutenberg: http://www.gutenberg.org/files/8106/8106-h/8106-h.htm

div.script{
    width: 5.5in;
    height: 6in; /* if not set columns will use space until end of the page */
    column-width: 2.5in; /* define column width, makes two for this box */
    column-gap: 0.5in;
    column-fill: auto; /* disables balanced column layout */
}

Restaurant Card with Spanning Content

The following example shows an advanced layout with rules between columns and a headline and an image spanning the columns.

Sushi

Sushi (すし, 寿司, 鮨, 鮓, 寿斗, 寿し, 壽司) is a Japanese food consisting of cooked vinegared rice (shari) combined with other ingredients (neta). Neta and forms of sushi presentation vary, but the ingredient which all sushi have in common is shari. The most common neta is seafood.

Maki Sushi

Avocado Maki
avocado, rice and nori (dried seaweed)
Kappa Maki
cucumber, rice and nori (dried seaweed)
Sake Maki
salmon, rice and nori (dried seaweed)
Tekka Maki
tuna, rice and nori (dried seaweed)

Nigiri Sushi

Sake Nigiri
salmon, rice
Ebi Nigiri
shrimp, rice
Maguro Nigiri
tuna, rice

Excerpt "Sushi" from Wikipedia: http://en.wikipedia.org/wiki/Sushi

div.card{
    column-count: 2;
    column-gap: 0.25in;
    column-rule: thin solid gray; /* adds a thin gray line between columns*/
    ...
}
div.card h1 {
    column-span: all; /* heading spans all the columns */
    ...
}
div.card img{
    display: block;
    width: 100%;
    margin-top: 0.25in;
    margin-bottom: 0.25in;
    column-span: all; /* picture spans all the columns */
    ...
}

Article with Single-Content Columns

This simple example shows how content like a heading or image can be made sole content of a column using manual column breaks.

United States Capitol

The United States Capitol is the meeting place of the United States Congress, the legislature of the federal government of the United States.

Located in Washington, D.C., it sits atop Capitol Hill at the eastern end of the National Mall. Though it has never been the geographic center of the federal district, the Capitol is the origin by which both the quadrants of the District are divided and the city was planned. Officially, both the east and west sides of the Capitol are referred to as "fronts."

Historically, however, only the east front of the building was intended for the arrival of visitors and dignitaries.

Like the federal buildings for the executive and judicial branches, it is built in the distinctive neoclassical style and has a white exterior.

Excerpt "United States Capitol" from Wikipedia: http://en.wikipedia.org/wiki/United_States_Capitol

div.article{
    height: 2.5in;
    column-count: 5;
    ...
}
div.article h1{
    break-after: column; /* explicit break ensures heading has own column */
    ...
}
div.article img {
    display: block;
    height: 100%; /* makes the picture as high as the column it's in */
    margin: auto;
    break-before: column; /* explicit breaks ensure picture has own column */
    break-after: column;
}

Ensuring Vertical Rhythm for Improved Readability

This sample shows how the different values of the property -ro-line-snap are used to align the text vertically to a virtual grid, giving the content a more pleasant look.

-ro-line-snap: none

Lorem

ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem

-ro-line-snap: baseline

Lorem

-ro-line-snap: contain

Lorem

div.gridlayout {
    column-count: 3;
    -ro-line-grid: create; /* create the virtual grid to which lines can snap */
    line-height: 1.2; /* sets the distance between the virtual grid lines */
    ...
}
div.none {
    -ro-line-snap: none; /* text is not vertically aligned to grid */
}
div.baseline {
    -ro-line-snap: baseline; /* text baseline is vertically aligned to grid */
}
div.contain {
    -ro-line-snap: contain; /* larger text is aligned in the middle of grid lines */
}

As seen in the first box, without a line grid differently sized elements like the headers shift the lines. There is a noticeable deviation in the vertical postion of lines in two adjacent columns. Also single lines at the bottom of a column may stand out.

To prevent this unaethestic positioning, the lines of all columns need to be aligned to a common, invisible grid. With the CSS property -ro-line-grid, such a virtual grid is created. By setting the property -ro-line-snap, lines can be aligned to this grid.

In the second box, the baselines of the text are aligned to said invisible grid. Adjacent lines now have the same vertical position, which improves the readability and gives the text a tidier look. Note that the distance between the headings and paragraphs has become larger, as the first line has to be moved further down in order to match its baseline with the grid.

In the third box, the property is set to contain. This has no different effect on the normal text, however for text with a different line-height or font, this yields a different result. While headings are no longer baseline aligned, the result can, depending on the specific scenario, be space-saving. Whether it visually fits the surrounding design has to be tried.

In all cases the top and bottom margins of paragraphs and headings may require adjustments to produce the desired result.