Layout utilities: Columns

In supporting browsers, CSS column layouts can be created using the utility classes from src/utilities/layout/_columns.scss.

Most of the column utility classes are wrapped in supports-clauses to make sure columns are not applied in browsers supporting some but not all the column properties required for a good user experience.

This block has class columns-readable applied, making it add columns of a minimum readable line-length, as long as there is available horizontal space. In browsers not supporting columns, the block will have a fallback applying a readable max-width.

This block also has class breaks-readable from the breaks utilities which set the number of orphan lines roughly matching the minimum line-length. It's useful in situations where the contents would otherwise be split up in many very short columns because of the available width. The effect is that any paragraph shorter than the column is wide will not break over two columns.

Going horizontal

This block has class columns-readable-horizontal applied, which keeps the column height comfortably within the viewport, but only when the viewport is wide enought for at least two columns of text.

Around it is a wrapper with class columns-readable-horizontal-scroll that adds horizontal scrolling and makes the content slightly larger than its container to hint there is more content. If you don't want that hint you may just add utility class overflow-x-scroll instead. This horizontal columns with scroll works best on full width wrappers.

To see the effect you may need to make your browser window narrower, until the last paragraph disappears.

And now, 10 paragraphs of Lorem ipsum…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

…and finally…

This is the last paragraph.

Limitations with columns

Browser support for the break and column properties is far from complete.
Safari has trouble with top margins between items at breaks between columns, sometimes leaving a gap before the first item in a column.
Some browsers have trouble with markers on list items in columns, unless the column-gap is wider.
Columns doesn't work well with Level 4 as descenders from the last line of each column may be cut off and displayed at the top of the next column, or the collapsing of margins at breaks may shift the next element after the columns out of the vertical rhythm.