With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally. .intro { -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2; }
C
When you want to keep your columns at a specific width, use column-width. section { -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; } The browser will calculate how many columns of at least that width can fit in the space. Think ofcolumn-width as a minimum width suggestion for the browser. column-width is a flexible property. Once
In a multi-column layout, you can make elements expand across the columns with column-span. h2 { -webkit-column-span: all; column-span: all; } Assign column-span to an element inside of the multi-column layout to make it a spanning element. The multi-column layout will resume with the next non-spanning element. The value of column-span can either be all
To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you’ve ever styled border, then you are ready to style column-rule. .container { -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: