The column-span property will make an element to span across several columns. If column-span: all; is set on an element, all content that comes
before that element in the markup should be in columns above that element. All content in columns appearing in the markup after the element should be in columns below the spanned element.


The columns may look ulgy when text with text-align: justify; is set in very narrow columns as the left and right edges stay justified. You can use a JavaScript library called Hyphenator16 to hyphenate words and keep our text looking tidy.
Related Tutorial
5. columns