Create multi-column layouts with CSS

font-size line-height

 Take advantage of browser support and create great multi-column layouts

A mainstay of newspaper and magazine print design is the humble column.

Columns help to improve the readability of text, ensuring that the consumer ; , doesn t lose their place in lines of the text that are too long.

For a long time, web designers have attempted to bring this staple typographical design element to the screen, but have always been restricted by the need to set up complicated floating elements, and no support for automatically flowing text content across columns.

A CSS module to support multi-column layouts was first discussed in 1999, so it s been a long journey to get to the point where we can start to use the properties made available. Thankfully, with the release of Internet Explorer 10, all the major browser vendors will support the standard to a greater or lesser degree

In this tutorial we re going to examine the primary properties available to achieve multi-column layouts, starting with some basic HTML5 markup. We ll not only create a flexible layout, but also look at some of the current limitations, and how to best take advantage of the feature today. Finally, we ll see how you can repurpose your design to support different screen sizes and resolutions.

Create your HTML

We re using a basic HTML5 document with a single article, complete with header and footer Fortunately, the HTML markup is as basic as you can get: we ve got a series of paragraphs, a few heading tags and a couple of images. You can either open our start.html document from the resource disc, or use your own content.

Add a stylesheet

We re going to leave the HTML alone throughout, with all the changes that we make happening in a stylesheet. Let s create that now by saving a new plain text document into the styles folder as  screen.css . Create a link to it from the HTML document with the code shown below.

001 clink rel=”type=/css”href=/screen.css”/>

Basic properties

Westart off by giving our article a bit of basic styling, using typography and spacing, to create the general look and feel of a newspaper. Add the CSS rules below to your stylesheet document to set this up, and preview in your browser. Note that even the most recent web editors dontend to fully support columns yet, so youneed your browser on hand a lot to test during this tutorial.

001 /* CSS Multi-Column Layouts */

002 body {

003 background: #444;

004 font-family: georgia, times, serif;

005 font-size: 62.5%;

006 line-height: 1.4em;

007 }

008 article {

009 position: relative;

010 margin: auto;

011 width: 920px;

012 padding: 20px;

013 background: white;

014 box-shadow: 0px 0px 10px #333;

015 }

016 article p {

017 font-size: 1.2em;

018 line-height: 1.6em;

019 }

Introducing columns

CSS allows you to set up columns in any block-level element by using the column-count property. The column-count property accepts a number representing the number of columns you d like the element to be split into. Try adding the code below to your existing article rule in the stylesheet so you can see this in action:

001 column-count: 2;

Vendor prefixes

As with many of the CSS3 properties and modules, columns currently need you to employ browser-specific vendor prefixes to call and set the property. Well need to duplicate our rules using-ms-,-webkit-,-moz-and-o-before each property to target the big five-Internet Explorer, Safari/Chrome, Firefox and Opera-respectively.

001-webkit-column-count: 2;

002-moz-column-count: 2;

003-o-column-count: 2;

004-ms-column-count: 2;

005 column-count: 2;

Set the gutter width

You can manually set the width of the gap between columns using the column-gap property. If you d like a wider gap between columns, set a higher column-gap value or to achieve closer columns set it lower. If you omit the column-gap property, the browser will automatically format a gap for you.

001-webkit-column-gap: lem;

002-moz-column-gap: lem;

003-o-column-gap: lem;

004-ms-column-gap: lem;

005 column-gap: lem;

Set the column width

Similarly, you can control the width of your columns using the column-width property. As with the column-gap property, if you don t set this explicitly the browser will calculate the value for you automatically. If you only set the column width, the gap will be calculated to fit the width of the container, and vice

versa. If you specify a width that s too big for the element, the browser will override your setting.

001-webkit-column-width: 20em;

002-moz-column-width: 20ei

003-o-column-width: 20ei

004-ms-column-width: 20ei

005 column-width: 20ei

A word on limitations

You cancurrently set different widths for different columns, so if you want to have one wide column and two narrow columns, you ll have to nest elements inside columnar layouts. This limitation may be addressed by the W3C in the next iteration of the CSS Columns module

Flowing content

By default your content will flow automatically from one column to the next, and the length of the overall element (in our case an tag) will be adjusted to fit a balanced fill of columns. This ensures the final product looks tidy and clean. You can overwrite this setting with the column-fill property.

001-webkit-column-fill: balanced;

002-moz-column-fill: balanced;

003-o-column-fill: balanced;

004-ms-column-fill: balanced;

005 column-fill: balanced;

Setting up our layout

Lettake what wegot so far and apply it to our article to create a nice multi-column layout. We ll start off with four columns, and allow the content to fill the columns automatically. We will also make our first

paragraph a bit bigger, so as to act as an introduction to the main piece.

001 article {

002 position: relative;

003 margin: auto;

004 width: 920px;

005 padding: 20px;

006-webkit-column-count:4;

007-moz-column-count:4;

008-o-column-count:4;

009-ms-column-count:4;

010 column-count: 4;

011-webkit-column-gap: 10px;

012-moz-column-gap: 10px;

013-o-column-gap: 10px;

014-ms-column-gap: 10px;

015 column-gap: 10px;

016 background: white;

017 box-shadow: 0px 0px 10px #333;

018 }

019 article p {

020 font-size: 1.2em;

021 line-height: 1.6em;

022 }

023 article p.intro {

024 font-size: 1.6em I important;

025 }

Test and review

If you load up the page inside your browser now, you should see a nicely balanced four-column layout with text balanced nicely between the four columns. Younotice that some of the text should perhaps flow across multiple columns though, especially in the header. Letaddress that next.

Spanning columns

Headings and pull quotes can be set to span multiple columns by using the column-span property. Currently this property only supports two values: none or all. This means that your content will either break out and flow across all the columns in your layout, or will conform to the column layout. Add the code below to see this in action:.

001 article header {

002 position: relative;

003 display: block;

004-webkit-column-span:all; column-span: all;

005 border-bottom: 2px solid #333;

006 }

007 article header hi {

008 font-size: 9.5em;

009 line-height: lem;

010 font-weight: bold;

011 text-transform: uppercase;

012 margin: 0;

013 padding: 0;

014 }

015 article header h4 {

016 text-align: right;

017 margin: 0;

018 padding: 0;

019 }

Images and columns

You ll notice that the images in our original markup are rendering perfectly inside the column width. This would be the case regardless of the size of the image, so long as you leave the width and height attributes out of the  tag. Doing so means you can use images just as you normally would, without worrying about how they are going to fit into variable-size columns.

Breaking columns with spanned elements

About halfway down our article we ve got an aside element, which is acting a bit like a pull quote. We re going to use this to break up our columnar layout by applying the column-span property to the aside element. While we re at it, we ll add a border to the top and bottom to help separate the element visually.

001 article aside {

002 position: relative;

003 display: block;

004 font-size: 2.2em;

005 line-height: 1.8em;

006 font-style: italic;

007-webkit-column-span:all;

008 column-span: all;

009 border-top: 2px solid #333;

font-size line-height

010 border-bottom: 2px solid #333;

011 margin-bottom: 20px;

012 }

Column behaviour

Reload the page in your browser to see the breakout in situ. Notice that the columns now fill left to right above the , and then pick up again beneath it with the content that appears after it. This is important behaviour to recognise when using columns-any element that spans columns breaks the structure.

Applying column rules

As well as providing a border to the spanning elements, we can also apply a defined visual separation

to the columns themselves by using the column-rule property. This accepts arguments similar to the border property in CSS. Try adding the code below to your rule in the stylesheet, to see an example of column rules in practice.

001-webkit-column-rule: lpx solid #333;

002-moz-column-rule: lpx solid #333;

003-o-column-rule: lpx solid #333;

004-ms-column-rule: lpx solid #333;

005 column-rule: lpx solid #333;

Style the footer

Weuse some of the properties we ve covered above to style the footer element, which is going to round off our article nicely. First it should span the columns, have a border top and bottom, and we ll add some margin and padding to help it get some distance and sit apart from the content a little. Add the rule below to put this in place.

001 article footer {

002 position: relative;

003 display: block;

004-webkit-column-span:all;

005 column-span: all;

006 border-top: 2px solid #333;

007 border-bottom: 2px solid #333;

008 padding: 10px;

009 margin-bottom: 20px;

010 }

Preview and test

We ve just about completed our basic column layout now, so before we attempt to make it flexible enough to work across different resolutions on multiple devices, it s a really good idea to preview it in your browser, and then make sure it works across all the common browser options you plan to support.

Always remember that you can use Modernizr to test for column support and provide a fall-back for older browsers.

Fluid layouts

Up until now wehad a fixed-width for our article, set at 960px. Wechange this by using @media queries inside our stylesheet. The only element that needs to change is the rule, with the width and number of columns adjusted to suit the screen width. Add the code below in place of the existing article {} rule to start:

001 @media all and (min-width: 960px) {

002 article {

003 position: relative;

004 margin: auto;

005 width: 920px;

006 padding: 20px;

007-webkit-column-count:4;

008-moz-column-count: 4;

009-o-column-count: 4;

010-ms-column-count: 4;

011 column-count: 4;

012-webkit-column-gap: 10px;

013-moz-column-gap: 10px;

014-o-column-gap: 10px;

015-ms-column-gap: 10px;

016 column-gap: 10px;

017-webkit-column-rule: lpx solid #333;

018-moz-column-rule: lpx solid #333;

019-o-column-rule: lpx solid #333;

020-ms-column-rule: lpx solid #333;

021 column-rule: lpx solid #333;

022 background: white;

023 box-shadow: 0px 0px 10px #333;

024 }

025 }

026 @media all and (max-width: 959px) and (min-width: 481px) {

027 article {

028 position: relative;

029 margin: auto;

030 width: 90%;

031 padding: 20px;

032-webkit-column-count:3;

033-moz-column-count: 3;

034-o-column-count: 3;

035-ms-column-count: 3;

036 column-count: 3;

037-webkit-column-gap: 10px;

038-moz-column-gap: 10px;

039-o-column-gap: 10px;

040-ms-column-gap: 10px;

041 column-gap: 10px;

042-webkit-column-rule: lpx solid #333;

043-moz-column-rule: lpx solid #333;

044-o-column-rule: lpx solid #333;

045-ms-column-rule: lpx solid #333;

046 column-rule: lpx solid #333;

047 background: white;

048 box-shadow: 0px 0px 10px #333;

049 }

050 }

Adjust the fonts

" You ll notice as you expand and collapse the size of your browser window, the columns jump from four down to three as your window becomes narrower than 960px. We need to adjust the size of the headline to suit, using the same method we ve employed for the rule:

001 @media all and (min-width: 960px) {

002 article header hi {

003 font-size: 9.5em;

004 line-height: lem;

005 font-weight: bold;

006 text-transform: uppercase;

007 margin: 0;

008 padding: 0;

009 }

010 }

011 @media all and (max-width: 959px) and (min-width: 481px) {

012 article header hi {

013 font-size: 5em;

014 line-height: lem;

015 font-weight: bold;

016 text-transform: uppercase;

017 margin: 0;

018 padding: 0;

019 }

020 }

Target mobile devices

The typical mobile device has a resolution of 480px or less in landscape mode, although this is changing with the arrival of higher resolution devices-like the iPad s phenomenal Retina display. We can create a no-columns layout for these devices to make it easier to read our content on smaller screens. This works using the same principles as we ve established in the previous steps.

001 @media all and (max-width: 519px) {

002 article {

003 position: relative;

004 width: 90%;

005 margin: auto;

006 padding: 20px;

007-webki t-column-count : 1 ;

008-moz-column-count: 1;

009-o-column-count: 1;

010-ms-column-count: 1;

011 column-count: 1;

012 padding: 10px;

013 background: white;

014 box-shadow: 0px 0px 10px #333;

015 }

016 article header h1 {

017 font-size: 3em;

018 line-height: 1em;

019 font-weight: bold;

020 text-transform: uppercase;

021 margin: 0;

022 padding: 0;

023 }

024 }

Test and repeat

Now you ve got a responsive, fluid layout that will change to suit the screen it s being viewed on, all while employing a popular offline layout approach where content is arranged into columns. Test across different devices, and start taking advantage of columns in your next design project!

Comments are closed.