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
Properties
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:
When working with columns, you might notice that between each column is a space, or gap. The browser sets the gap to 1em. Generally, 1em is a comfortable space between columns. If you find that the gap is too wide, or too narrow, you can adjust it with column-gap. article { -webkit-columns: 2; -moz-columns: 2;