Column Layouts and Grid Layouts

Column layouts are those website layouts based on CSS that usually illustrate a website in a few columns in the content area. You could have a left column, a middle column and right column for instance. Usually it’s such that the middle column is the widest one containing the content and the right and the left are sidebars.

In column layouts, every area in the layout can only take up the whole height from the top to the bottom of the content area. That means, the middle column that’s responsible for the content for instance, cannot be broken into different rows, each having their own width, unless you have completely separate columns, each one again taking the whole height of the content area.

Grid layouts are a completely different story. In Grid layouts, you can have columns and rows. Considering our previous example of layout with three different columns, the middle column could then be broken into different rows as well, each row having the width of your choice. Grid layouts are also made with CSS but the CSS rules are much more elaborate and complicated.

One good example of grid layouts is the old popular 960 Grid System.

I’ll add some graphic images to this post to illustrate each of the layouts graphically.