Graphic. Illustration of column spans spanning various percentages.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Knowing how to create multi-column web design layouts is a key skill for any front-end developer. They are use almost everywhere! Fortunately, they are quite easy to make. My solution for creating CSS-only column includes wholes, halves, thirds, quarters, and eighths so you can mix-and-match columns anywhere from 1/8 of the screen wide to 100 percent wide!

Begin by adding a parent container in the HTML. Call this parent container .columns—note that’s a CSS class name. Also apply W3School’s cleafix hack to this parent div. This prevents content from within the columns breaking out as well as disrupting content that may not fall into columns later in the layout.

Then fill the .columns.clearfix parent container with child divs, one for each desired column. Apply a CSS class name to each child div based on the width. For example, for a column that is one-third (or 33%) wide of the viewport, give the div the CSS class name .col-33. It may be easier to simply copy-paste the child div again until they form a total width of 100%.

One note of importance: whether or not repeating the .columns.clearfix parent container depends on the same, or varied, column widths. When ALL column widths are the same, you may use only ONE .columns.clearfix to contain them all. When the widths are all the same, multiple rows can exist within .columns.clearfix. However, when column widths are NOT the same, use a new .columns.clearfix parent container for EACH ROW totaling 100%. If each row doesn’t receive its own parent container, the columns may bump into each other and disrupt the web design’s layout.

Graphic. Illustration of how to name and nest various HTML divs to create CSS-only columns.

On the CSS side, begin by resetting html and body with zero margin, zero padding, and 100% height. This ensures layout fills the viewport completely and eliminates any gaps at the top, bottom, or sides.

Proceed to styling the .columns parent container with some straightforward settings: block display, full-width, zero padding, etc. Then, set some universal styles for the individual columns. Add back in some padding to create whitespace for the content and of course, adjust box-sizing to border-box so that whitespace is built within the column inside of outside its edges. Apply a float so the columns sit beside each other in the layout. (Those floats are why we need the clearfix hack mentioned above!) I also added some styling for any graphics that appear in the columns using familiar settings. Finally, I set the column widths according to mobile-friendly breakpoints in the CSS using good ‘ol @media queries. In order to provide the best, precise fit possible, I use CSS calc() for the 33% and 66% wide columns.

Check out my JSFiddle to see the CSS-only columns in live action:

The Fiddle also provides basic guidelines for breakpoints to make the columns responsive and even more mobile-friendly. Each columns also has CSS styles adding back in padding to provide whitespace and visual breathing room for the multi-column content. Of course, this can be changed as desired.

Happy coding!