In last week’s tutorial on CSS Columns I went over the basic creation of columns using the CSS3 properties column-count and column-width. These can be used individually to create columns just fine, but as was mentioned last week the best way to
column-gap
The column-gap property affects the size of the gap between columns. You can see a sample below:
See the Pen Column-Gap Example by Alex Dobson (@SufferMyJoy) on CodePen.
When giving column-gap a value, you can choose either between a length (in px or em) or you can simply put the keyword normal, which will then set the gap to the browser default spacing between columns. The Mozilla Developer Doc page for column-gap can be found here for more information.
column-rule
The column-rule property creates a separator (or a “rule”) between your columns. This can be a straight line, dashed line, dots, or anything specified as a border-style (see the Mozilla Developer Doc to see all the different styles). You can see and experiment with the example given below:
See the Pen Column-Rule Example by Alex Dobson (@SufferMyJoy) on CodePen.
The Mozilla Developer Doc page for column-rule can be found here for more information.
column-span
The column-span property is used to make it possible for an element to span across all columns when its value is set to all. This allows things like titles to span across all the columns of your page, which can definitely look really great. The one big downside to this property is that it’s not supported in Firefox. This can be a major problem for many people, so its something to be aware of. This also means if you are using Firefox you will not be able to see the effects of the example below:
See the Pen Column-Span Example by Alex Dobson (@SufferMyJoy) on CodePen.
Although this feature is not in Firefox you can go vote for it on Bugzilla. The Mozilla Developer Doc page for column-span can be found here.
column-fill
The column-fill property allows you to control the way that columns are partitioned. Please note that right now this property is only available in Firefox. The value given can be either balanced or auto. balanced means that all the columns will be the same height. auto means that the columns will just take up all the room. You can check out the example below:
See the Pen Column-Fill Example by Alex Dobson (@SufferMyJoy) on CodePen.
It’s important to note that the default value for column-fill is actually balanced. It’s also important to note that this property only takes effect when you specify the height property for your element. It won’t work without it.
Conclusion
Although I haven’t gone over them here, columns actually have quite a few problems. However, columns are a very powerful tool that can be used to really enhance the look of your site. Plus, they are a must-include feature on most themes these days (at least for WordPress), so its important to know how to make them easily. The best way to keep from getting any strange errors is to keep them simply coded using as few properties as you can.
For example, sometimes when specifying the height property, you can run into a problem where your columns will become taller than your view port if you get skinny enough. This causes the users to have to scroll. This can be avoided by just leaving out height if possible. Even without the height the columns will still look really great. Simple solutions like this will produce the least amount of errors, which is especially important when giving the user control of the columns with shortcodes.
As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.