|

Multi-Column Layout With CSS

Multi-Column Layout With CSS

A familiar technique of newspapers and magazines is to break longer text areas up into two or more columns. The reason for this is because of the text is running quite long across a given area, it can sometimes cause people to lose track of where the next line is. With the CSS Multi-column Layout Module Web professionals can now also apply a column layout to an area of text using just a bit of CSS styling. Multi column layouts in CSS are also responsive automatically, so often you can wind up with two or three columns on a laptop or tablet, while a mobile device might have only one column.


Adding A Column Effect To An Article

Let’s first look at the markup we’ll use to get started. It consists of an <article> tag with a few <h2> and <p> elements contained within the <article>.

html

Here is the layout of our article, before applying any column effects.
article with no css columns yet

Now there are a couple of ways to turn on multiple columns in your layout. You start by targeting the element you would like to break up into columns, then apply either the property of column-width or column-count. The column-width property simply creates as many columns as will fit the available space. column-count on the other hand simply creates the number of columns you specify.


column-width

  • Values: width
  • Default: auto
  • Applies to: block-level elements, table cells, and inline-block elements

column-count

  • Values: integer
  • Default: auto
  • Applies to: block-level elements, table cells, and inline-block elements

Now let’s turn that article into a three column layout and make use of the column-count property to do so. This property always accepts an integer that is positive and can not be fractional. So for example, 1, 2, 3, etc… Browsers will adjust the width of each column dynamically to fit the width the device allows.

css

css column count example

Let’s also add just lightest of blue backgrounds to the <article> tag so we can see the exact area it occupies on the screen.
css

css multi column with background color set

Our other option for turning on columns is that column-width approach. We can first try a value of say 150px and the browser will create as many columns as it can fit in the <article> element. If there is any extra space, the column widths expand dynamically to fit the available space.

css

css column width example

If we shrink the viewport, now the layout only has two columns since that is all that fits. This is a nice built in responsive feature of the CSS Multi-column Layout Module.
css column width two column layout


The columns Property as shorthand

You may also specify columns on an element using the columns property. The neat thing about the columns property is that you can either specify a count like 1 or 2, or you can specify a width like 300px. Either will work. Additionally, you can specify both count and width at the same time. For example columns: 3 200px;. With this approach, all columns will be 200px wide, but if the width of the viewport gets really wide allowing for say 5 or 6 columns – the fact that 3 had been specified sets a maximum amount of columns.

css columns shorthand notation

A very wide viewport still only displays three columns when using columns: 3 200px;.
css columns with wide viewport

Notice if we now omit the count of 3 and use columns: 200px; as the rule, we now have as many 200px wide columns as will fit.
css columns proptery width only set


How CSS Columns Work

The multi column layout in CSS now has a new container which exists between the content box and the content and is called the column box. These boxes are arranged in a left to right layout with all column boxes in the containing element having the same width and height. Height adjusts dynamically allowing the text to be spread out even across all columns. For the most part, column boxes are similar to block level elements. Some things that are different about column boxes however are that they do not have any padding, border, or margin like a standard block level element. Additionally, each column box can not have it’s own background color. In multi-column layouts, padding and margins are applied to the containing element box, not its columns.


Controlling Space Between Columns

You can control the size of the gap between columns by using the column-gap property. If you would like to create a visible line between columns, the column-rule property has your back. Here we set the column-gap to 4em.

css column gap example

Now let’s add a vertical line between columns using the column-rule property like so.

css column rule example

Note: The column-rule property is shorthand for column-rule-style, column-rule-color, and column-rule-width. All of these properties work just like the border-* properties, so if you know how to use borders in CSS, you can apply the same techniques to column rules.


Images In Multi-Column CSS Layouts

You may add images as well to your multi column css layout. A good idea is to set the width of each image to 100% and they will resize automatically to fill the column from edge to edge. We’ll add an image under the Operating System heading and the Application Software heading.

html

css multi column layout with images

Changing to a two column layout shows the images still look nice and fill the width of each column.

css two column layout with images


Fixing First Column Margin

You may have noticed that in all the examples so far, the first column always has a little bit of a margin area before the content begins. All of the remaining columns end up having content that goes right up to the top of the column. To fix this, we can simply apply a margin-top 0; to all elements inside the column container. In our case, that is <article>.

Now the content lines up better across all of the columns!
css multi column same content height

Tip: Never explicitly set a height on the containing column element. This can limit the amount of space available to distribute content across all of the columns. If there is not enough space, the browser will create spillover like overflow columns outside of the column container. This will likely cause scrollbars to appear as well, and generally just doesn’t work that great. Here is what this condition looks like.
do not set height on column element


The column-fill property

If setting height on the column box is needed for one reason or another, you will want to know about the column-fill property. Browsers will try to balance the content between columns automatically for you by resizing the height of the column container. All of the examples so far have demonstrated this. If you do set that height however, there may be times when there is not enough content to fill all of the columns. In this scenario you can control how the content is balanced across the columns using column-fill. The three possibilities are auto, balance, or balance-all. The default is balance.

Consider we now have a height of 650px on the container and column-fill is set to balance.

What happens is the full height of the container is presented as you can see by the light blue background. The content however balances across all three columns, leaving empty space in the lower half of each column.
css column-fill balance

The other option is to set column-fill to auto. This has the effect of filling each column top to bottom entirely before moving to the next column. Now, all three columns are presented however there is only enough content to fill the first two.

css column fill auto


How To Span Columns

With the column-span property you can create some really cool effects with an element inside of the column container. Essentially, you can apply something like column-span: all; to an element and it will break out of the column box and span all they way across all columns. The effect this has is to create a horizontal divider of sorts with the top columns being related and the bottom columns being related. In the markup, we have added a new paragraph highlighted below:

Here is the css for the .spancolumns class. Most of it is for styling, but pay attention to the column-span property.

css column-span example


Multi-Column Layout With CSS Summary

In this tutorial we learned all about multi columns layouts using nothing but CSS. The CSS Multi-column Layout Module is what makes this type of layout possible. The properties below are some of the ones we used to demonstrate the code examples above.

  • column-count Sets the number of columns an element should be divided into
  • columns Can use this instead of column-count if you like
  • column-fill If a height is set to a multi column element, this controls how content fills the columns
  • column-gap Sets the width of the gap between columns
  • column-rule Shorthand for column-rule-style, column-rule-width, and column-rule-color. Sets the style of the rule between columns.
  • column-span You can make an element span all columns with this
  • column-width You can set exact column widths if you like
|