Columns on the website is very useful to enhance the user experience, a reader on your site will be more convenient to read the article that using columns, because it’s simple and easy to read.
Website columns is also used for template layout. Each column is divided to become a content and the rest is for right/left sidebar.
In today’s post, we present 20 useful HTML / CSS columns that you can use for your project. These website columns resources and tutorials will help you to make your site look pleasing and engaging. Let’s check it out.
See Also: 9 jQuery Grid Layout
Waffle Twelve-Column
A twelve-column demo of Waffle, a simple, powerful, responsive grid framework by Landon Schropp
CSS3 Columns Properties
A nice HTML/CSS column by Tim Bogdanov.
CSS3 Multiple column layout
Learn how to create beautifully-designed table with CSS3.
Expanding Column Layout
A responsive expanding column layout to present projects, articles, and more.
CSS-Only Pinterest Style Columns Layout
If you have seen pinterest, they has a multi-column interface to display the pins and those pins arrange nicely even if they are not of the same height. This snippet will help you to create Pinterest like columns layout.
Responsive-Friendly CSS Columns
With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.
Easy Row/Column System with data attributes
Combination of SASS, HAML and HTML5 data attributes column system. Not responsive yet but pretty less code for infinite columns just by configuring the variables.
Columns flow
Flow three columns with content and images into three rows with floated images for tablets, and stacked for mobile.
HTML5/CSS3 Columns for All Browsers
This tutorial will help to create your own column-centric website layouts from scratch using bare-bones HTML and CSS codes.
3 Column Responsive Layout
At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.
3 Column CSS Layout: Fixed Width And Centered
Build a 3 column layout with fixed width and centered on the page.
Grid System 12 Columns
4 Equal-Width Columns
Content that becomes 2 equal columns for medium screens, then 4 equal columns when space allows.
CSS Swag: Multi-Column Lists
Multi-column lists: can’t live with ’em, can’t achieve perfect bliss without ’em. Paul Novitski offers a staggering six possible methods for accomplishing this commonly requested layout trick. Examine your options and choose wisely.
Column Checkout Style
Basic three Column Checkout Style for a single page checkout.
CSS Multi-column Layout Tutorial
Baljeet Rathi introduces the different properties that make up the CSS Multi-column layout module, and how they can be used in responsive designs.
Responstable
Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :after to create a alternate column header when in mobile view.
CSS3 Multiple Column Layout Module
The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I’m going to be taking a look at some of its properties and demonstrate them through a series of examples.
Sass grid using inline-block instead of float
A Sass 12 column grid using inline-block instead of floats. No need to clear floats with hacks
