Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Multi-column Layout

Problem You want to distribute your content across multiple columns similar to a newspaper layout
to save vertical screen space.

Solutions The Multi-column module allows content to flow into multiple columns inside an element.
It offers CSS properties that let you define the number of columns, column width, column
gaps, and rules governing overflow.
There is no specific markup for this solution. You use CSS to modify a given element and
turn it into a multicol element, which occurs automatically when certain column styles are
applied to an element.
This also means that if a browser such as IE9 doesn’t support the Multi-column layout
module, the content remains in normal flow without any extra unused markup.

Pattern^

HTML

CSS div { column-count: 4; }
div { column-width: 100px; }

Limitations A table element can’t be made into a multicol element.
IE9 and earlier versions don’t support Multi-column Layouts.
A vendor prefix, -webkit, -ms, and -moz for all browsers, is required.

Location This pattern works anywhere.