With CSS3, you can now easily set up a Web page with multiple columns without tables or complicated div tag structures. You simply tell the browser how many columns the body element should have and how wide they should be. Plus you can add borders (rules), background colors that span the height of the column, and your text will flow through all the columns automatically.
CSS3 Columns - Define the Number and Width of the Columns
There are three new properties that allow you to define the number and width of your columns:
- column-width
Defines the width your columns should be. The browser will then flow the text to fill the space with columns that wide. - column-count
Defines the number of columns on the page. The browser will then create columns wide enough to fit in the space, but only the number you specify. - columns
Shorthand property where you can define either the width or number (or both, but that rarely makes sense)
CSS3 Column Gaps and Rules
Gaps and rules are placed between columns in the same multicolumn scenario. Gaps will push apart the columns, but rules do not take up any space. If a column rule is wider than it's gap, it will overlap adjacent columns. there are five new properties for column rules and gaps:
- column-gap
Defines the width of the gaps between the columns - column-rule-color
Defines the color of the rule - column-rule-style
Defines the style of the rule (solid, dotted, double, etc.) - column-rule-width
Defines the width of the rule - column-rule
A shorthand property defining all three column rule properties at once
CSS3 Column Breaks, Spanning Columns, and Filling Columns
Column breaks use the same CSS2 options used to define breaks in paged content, but with three new properties: break-before, break-after, and break-inside.
Like with tables, you can set elements to span columns with the column-span property. This allows you to create headlines that span multiple columns more like a newspaper.
Filling columns decides how much content will be in each column. Balanced columns try to put the same amount of content in each column while auto just flows the content in until the column is full and then goes to the next one.
