Multicolumn Layout

CSS3: Multiple Column Layout

As communication designers, we all know it’s difficult to compare web to print. Making a page that resembles a graceful newspaper layout sounds great, doesn’t it? Thanks to CSS3 it is much simpler to achieve without using tables. Anyone can do it, even you! The tutorial below will highlight the html and css code used to create this multiple column layout. The end result is a fluid article that responds well to the size of your browser or device. This is what it will look like on a standard screen:

DEMO _MultipleCoulumnPage-800 TEXT & FONTS I chose an article from smashing magazine to use as my body copy. The article was perfect because I needed something with a slightly complex hierarchy. I also scouted google fonts for two families that would compliment each other well. After I chose my fonts, I copied the link and pasted it in the head of the html. For more information on using Google for web fonts check out this link.

Google Fonts

For an optimal pairing I chose a serif and a sans-serif with a similar x-height. I chose only what I absolutely needed for quicker page load. After the fonts were chosen, Google provides a link to copy and paste in the head of the html. When using Google Fonts, make sure to type in the correct ‘font-family’ and ‘font-weight’ in the CSS.

OVERVIEW The layout has columns set up in two different ways. One is by column-width and the other is by column-count. You can use both but for this tutorial I used them separately to better understand the difference. For every set of columns there is a column-gap, the space in between the columns. You can place a column-rule inside the column-gap , which is similar to a head rule because it serves as a divider and can be styled. Another trick I used for this demo is called a column-span. The column-span is used when you need an element to span across all columns or a specific amount of columns. I used this function with the sub-headers in order to divide the flow. What ever comes after the column-span will fall under it. Not all the multiple column layout properties are compatible with all browsers. For a list of browsers that are well-suited for this tutorial check out this awesome graph at inserthtml.com. Before I explain how the column properties are used in css, I want to show a breakdown of the html. You can easily grab the html from the DEMO link by viewing the source but I thought a visual might be helpful:

HTML BREAKDOWN: HEADLINES

_MCP_Headers

*NOTE THAT THERE ARE FOUR H5-TAGS IN THE CENTER SECTION

HTML BREAKDOWN: CLASS IDs

_MCP_ptags

*NOTE THAT THERE ARE 5 P-TAGS IN THE CENTER SECTION. THESE COLUMNS FLOW IN BETWEEN 2 COLUMN-SPANS. READ FURTHER FOR COLUMN-SPAN INFO.

HTML BREAKDOWN: <P> TAGS

_MCP_classes

*NOTE THAT THE DIV WRAPS AROUND THE WHOLE SECTION OF PARAGRAPHS (P-TAGS) AFTER AND BEFORE THE H4-TAGS.

Now that we have that covered you are ready for the css3 breakdown.

CSS3: COLUMN-WIDTH vs. COLUMN-COUNT CoulmnCount_width-800 COLUMN-WIDTH By setting up the width dimensions, the columns will remain the same width even as the browser gets smaller. It’s important to know that using just the column-width property means the amount of columns is irrelevant. This means that when the page is viewed on a small device like a phone, the columns will automatically scale down to one, maintaining its integrity. For this project I used a different class id for each differing column-width.

.columnA{ /* COLUMN WIDTH */ -webkit-column-width:20em; -moz-column-width:20em; column-width:20em;} .columnC{ /* COLUMN WIDTH */ -webkit-column-width:13em; -moz-column-width:13em; column-width:13em;}

This is what it will look like as it responds to the size of the browser or device: widthA widthB widthC     COLUMN-COUNT By using only the column-count property, the number of columns will take priority and the width of the column is irrelevant. This means that if there are 4 columns in your layout they will remain in tact on a small device, like a phone. This is not optimal typographically so make sure you decide your column-count wisely. For this project I used a different class id for each differing column-count.

.columnB{ /* COLUMN COUNT */ -webkit-column-count:2; -moz-column-count:2; column-count:2;} .columnD{ /* COLUMN COUNT */ -webkit-column-count:3; -moz-column-count:3; column-count:3;}

This is what it will look like as it responds to the size of the browser or device: countA countC countB   COLUMN-GAP For print it’s known as the gutter, but for multi-column layouts it’s know as the column-gap. The column-gap is the space between your columns. This property allows you to customize it to your needs but it isn’t necessary. It works in conjunction with the column-width and column-count properties. To keep the spacing consistent throughout this design, I set the column-gap to 2em for every column-width and column-count property used. The default is about 1em, but 2ems will give me enough space to insert a column-rule as needed.

ColumnGap-800

.columnD{ /* COLUMN GAP */ -webkit-column-gap:2em; -moz-column-gap:2em; column-gap:2em;}

COLUMN-RULE Similar to the head rule, the column-rule is a divider that you can style. It’s function is for easier readability and distinction. In the css I used shorthand which stands for column-rule-size, column-rule-style, and column-rule-color. ColumnRule-800

.columnD{ /* COLUMN RULE */ -webkit-column-rule: 1.5px solid #cdcdcd; -moz-column-rule: 1.5px solid #cdcdcd; column-rule: 1.5px solid #cdcdcd;}

    COLUMN-SPAN The column-span property will span an element across all or a specific number of columns. This works well for hierarchal purposes. For example, with this project I decided to use column-span to separate the main sections of the article. Underneath the span are several columns that are optically easier to read than they would have been without the span. The column-span keeps the code simple and the design functional and vice versa. For the purposes of this project I decided to coded the span so it stretches across all the columns.

ColumnSpan-800

h4{ margin-top: 20px; margin-bottom: 20px; padding-bottom: 2px; font: 900 21px/30px 'Lato', sans-serif; color: black; border-bottom: 1.5px solid black; /* COLUMN SPAN */ -webkit-column-span: all; -moz-column-span:all; column-span:all; }

 

THAT’S ALL!!

I hope this tutorial was helpful in teaching you how you can use multiple-columns with css3. It’s easy and fun as long as you understand their purposes. The html for the project is provided with the demo. The css is at the bottom of this page so you can inspect it and hack it as needed.

*{ margin: 0; padding: 0; } body{ /* shorthand code for margins*/ margin: 25px 40px; } /* COLUMNS BY CLASSES */ .columnA{ /* COLUMN WIDTH */ -webkit-column-width:20em; -moz-column-width:20em; column-width:20em; /* COLUMN GAP */ -webkit-column-gap:2em; -moz-column-gap:2em; column-gap:2em; } .columnB{ /* COLUMN COUNT */ -webkit-column-count:2; -moz-column-count:2; column-count:2; /* COLUMN GAP */ -webkit-column-gap:2em; -moz-column-gap:2em; column-gap:2em; } .columnC{ /* COLUMN WIDTH */ -webkit-column-width:13em; -moz-column-width:13em; column-width:13em; /* COLUMN GAP */ -webkit-column-gap:2em; -moz-column-gap:2em; column-gap:2em; } .columnD{ /* COLUMN COUNT */ -webkit-column-count:3; -moz-column-count:3; column-count:3; /* COLUMN GAP */ -webkit-column-gap:2em; -moz-column-gap:2em; column-gap:2em; /* COLUMN RULE */ -webkit-column-rule: 1.5px solid #cdcdcd; -moz-column-rule: 1.5px solid #cdcdcd; column-rule: 1.5px solid #cdcdcd; } /* BODY COPY */ p{ font: 300 14px/22px 'Lato', sans-serif; text-align: justify; } /* MAIN HEADLINE */ h1{ font: 700 55px/61px 'Domine', serif; } /* SUBHEAD */ h2{ margin-top: 20px; margin-bottom: 20px; padding: 20px ; background-color: black; font: 700 29px/35px 'Domine', serif; color: white; letter-spacing: 0; text-transform: uppercase; word-spacing: 2px; /* COLUMN SPAN */ -webkit-column-span:all; -moz-column-span:all; column-span:all; } /* WRITTEN BY &amp; DATE */ h3{ margin-top: 20px; margin-bottom: 3px; font: 100 18px/29px 'Lato', sans-serif; word-spacing: 2px; } /* 2ND LEVEL HEAD */ h4{ margin-top: 20px; margin-bottom: 20px; padding-bottom: 2px; font: 900 21px/30px 'Lato', sans-serif; color: black; border-bottom: 1.5px solid black; /* COLUMN SPAN */ -webkit-column-span: all; -moz-column-span:all; column-span:all; } /* 2ND LEVEL SUBHEAD */ h5{ margin-top: 10px; margin-bottom: 10px; font: 400 italic 18px/25px 'Lato', serif; }

  Check out these links for more information on multi-columns with css3: An Almost Complete Guide to CSS3 Multi-Column Layouts w3schools: CSS3 Multiple Columns CSS3: The Multi-Column Layout and How it will Change the Web

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>