Setting column gutter size using column-gap
Whenever columns are create using any of the above column properties, gutters are automatically added in between columns to add that much needed personal space between them. The default gutter width is 1em, which as a reminder translates into 16px in CSS unless the container's font size has been altered. You can modify the gutter width using the column-gap property. Lets say you have a container of 650px and you want to create columns that are exactly 150px in width. To achieve this pixel perfect division, a little math tells us the column-gap value we need:
150 x 4 + (Total column-gap) = 650
Total column-gap works out to be 50, and if we divide that by 3 (since there will be 3 gutters separating the 4 columns), we get a column-gap value of 16.67 (round up). Here's the result:
article.columns{
width: 650px;
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
-moz-column-gap: 16.67px;
-webkit-column-gap: 16.67px;
column-gap: 16.67px;
}
Output (screenshot):
column-width value of 150px and column-gap of 16.67px inside a 600px container
So a column-gap of 16.67px lets us have columns widths of exactly 150px inside a 650px container. Consider what happens if we increase column-gap by just 1px to 17px- now the Math no longer adds up to 650px exactly: 150 x 4 + (17 x 3) = 651px. In that case something has to give, and that's a column as the browser drops a column and turns the layout into 3 columns instead, with the 3 columns expanding to fill the total space remaining after subtracting the gutters (51px total) from the 650px container. In other words, the column-width value is now treated as the minimum desired width after factoring in the gutters to snugly fit inside the container, and not the actual width you get.
Separating columns in style using column-rule
You can add a vertical rule to visually show the boundaries between the columns using column-rule, which is a shorthand property for column-rule-width, column-rule-style, and column-rule-color. It accepts the same values as the border property to stylize the rule:
article.columns{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-rule: 1px solid #c54d1e;
-webkit-column-rule: 1px solid #c54d1e;
column-rule: 1px solid #c54d1e;
}
Column-rule when defined do not take up any physical space within the layout, unlike column-gutter, so their width has no consequence on the width of the columns themselves.
Output (screenshot):
column-rule: 1px solid #c54d1e defined
Changing distribution of content across columns using column-fill
You can change how content is distributed across the columns using column-fill. The default value is balance, which spreads the content evenly across all the columns. This means the height of the columns is automatically set based on this even content distribution.
If you give your columns an explicit height, then for column-fill, another value becomes available, which is auto. With auto the content is distributed sequentially, filling up one column before moving on to the next:
article.columns{
height: 300px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-fill: auto;
-webkit-column-fill: auto;
column-fill: auto;
}
Compare the following two examples, with both having an explicit column height defined, but for the first example, a column-fill set to "auto", and the second, the default setting of "balance":
 column-fill set to "auto" |
 column-fill set to "balance" (default value) |
The value "auto" only takes effect when columns have an explicit height; otherwise, you can expect the "balance" behaviour regardless. **
**Google Chrome (as of v39), seems to set column-fil to "auto" automatically for columns with explicit height defined, which is the opposite of all other browsers. It ignores column-fill: balance even when the value is set as such.
Getting certain content to span all columns using column-span
You can pull select content out of the constraints of the column they're in and have them span across all columns using the column-span property. This is typically done on headers or quotes to draw attention to them and add that stylish touch. Unfortunately Firefox (as of v34) doesn't support column-span yet, though all other major browsers do.
In the following, we've declared two elements within a columns layout -H1 and blockquote- as spanning all columns:
article.columns h1{
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
color: darkred;
background: #eee;
}
article.columns blockquote{
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
background: lightyellow;
}
<article class="columns">
<h1>Extra Extra read all about it!</h1>
<p>
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave, as webmasters, gone are the days where our primary concern is just with the optimal screen resolution to design our sites for. These days there are a lot more variables to content with.
</p>
<blockquote>"Life is like a box of chocolates. You never know what you're going to get."</blockquote>
<p>
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave, as webmasters, gone are the days where our primary concern is just with the optimal screen resolution to design our sites for. These days there are a lot more variables to content with.
</p>
</article>
Output (screenshot):
3 columns layout with H1 and BLOCKQUOTE set to column-span: all
From the markup, notice how content behaves before and after an element with column-span: all- as separate rows of columns. So the BLOCKQUOTE in this case carves up the content into two independent rows of 3 column content.
Dealing with column breaks with break-before, break-after, and break-inside properties
You can use the break-* properties to deal with when breaks should occur inside your columns (or not), instead of leaving it to chance. Imagine an image with a caption underneath it- having the two elements separated and spanning two columns would cause some serious confusion and fashion malfunction. Currently the break-* properties are only supported in IE10+ (as of January 1st, 2015). Neither Firefox nor Google Chrome supports it. The break-before and break-after properties accept all of the values below, while break-inside only accepts the smaller subset in blue:
| Method | Description |
|---|---|
| auto | The default value, which leaves it to the discretion of the browser whether to break before or following the target element. |
| avoid | Prevent any breaks before or after the target element. |
| left | Force one or two page breaks right before or after the target element so that the next page is formatted as a left page. |
| right | Force one or two page breaks right before or after the target element so that the next page is formatted as a right page. |
| page | Always force one page break right before or after the target element. |
| column | Always force one column break right before or after the target element. |
| avoid-page | Avoid any page break right before or after the target element. |
| avoid-column | Avoid any column break right before or after the target element. |
Currently the break-* properties are only supported in IE10+.
The following example makes use of some of the break-* properties to achieve the following:
- Headers (H2) always start at the top of a new column using
break-before - No column breaks anywhere inside BLOCKQUOTE elements using
break-inside
Lets see the CSS and HTML markup, then a screenshot of the outcome:
article.columns h2:not(:first-of-type){ /* target all H2 except first H2 element */
-moz-break-before: column;
-webkit-break-before: column;
break-before: column;
}
article.columns blockquote{
-mozbreak-inside: avoid;
-webkit-break-inside: avoid;
break-inside: avoid;
margin-left: 2px;
padding: 3px;
width: 90%;
box-shadow: 2px 2px 3px gray;
color: white;
background: gray;
}
<article class="columns">
<h2>Extra Extra read all about it!</h2>
<p>
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave, as webmasters, gone are the days where our primary concern is just with the optimal screen resolution to design our sites for. These days there are a lot more variables to content with.
</p>
<h2>Extra Extra read all about it!</h2>
<p>
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave, as webmasters, gone are the days where our primary concern is just with the optimal screen resolution to design our sites for. These days there are a lot more variables to content with.
</p>
<blockquote>"They say, life is like a box of chocolates. You never know what you're going to get."</blockquote>
<p>
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave, as webmasters
</p>
</article>
break-before and break-inside properties at work. Currently supported only in IE10+
Notice how for the H2 selector, we're only targeting elements after the first H2, since we're using break-before: column to insert a column break right before each H2. Doing this for the very first H2 as well would cause the first column to be empty as the first H2 is added to the second column instead.
- Introduction- column-width and column-count properties
- Other column related properties and customizations
- Creating responsive CSS3 multiple column layouts
