Using Grid Layout Classes

Today people browse the Web using devices with very different screen sizes and resolutions. To adapt (or "respond") to these conditions, one strategy that is quite helpful is to layout HTML page content in a "grid system."

The basic idea is that you can divide your layout into a fixed number of columns, often 12, and then assign a number of columns to each block that is in the layout. A block can fill all 12 columns, or it can share one row equally with another when each block is assigned 6 columns. To create a row with three blocks that share the window width equally, assign 3 columns to each of the three blocks. There are many combinations row configurations, like 12, 11-1, 10-2, 9-3, 8-4, 7-5, 6-6, 5-7, 4-8, 3-9, 2-10, 1-11, 3-3-3, 6-3-3, etc.

In this page, for example, the Using Grid Layout Classes area is assigned 9 columns, whereas the Fruit List occupies 3. Together these fill 12 columns. By contrast, the four Column areas on the bottom of the page are each assigned 3 columns, which adds up to 12 also. To see a graphic that depicts some of the layout options for a 12 column grid, click to see this image.

The CSS that helps us apply grid principles to this page comes from a website called That site is linked to this page dynamically, providing CSS to the browser to help it format this page. You can click here to see the CSS code that is being obtained from their site using the following parameters (included in the URL):

The people borrowed their ideas for the 12 column grid system from the people at 99lime claims it provides "Ultra-Lean" website building tools. The CSS provided by is MUCH leaner than the examples provided by The HTML KickStarter package is a useful bundle, but only once you begin to understand what it is providing. One component – a very important component – of what HTML KickStarter provides is this grid system. Without understanding 12 column layout principles, all the other elements that provides are going to lead nowhere.

Fruit List


One difference about the way the grid system is implemented by they call their classes grid_12, grid_11, etc. calls theirs col_12, col_11, etc. Another difference: doesn't use the container class.


A note about the placeholder images that are used in this page. They are provided by a website named

It lets you color and size placeholder images without downloading or uploading them anywhere.


Let's practice using this grid system from before we begin working with HTML KickStart. It is important to understand how to lay -out the blocks of HTML before dealing with the many options in the KickStart toolkit.


You'll notice that a "clear" class is provided by the CSS to force the layout to do a "carriage return" to the next line. Without it, content is liable to get bunched up in weird ways under some browser widths.

This is a simplified version of the example.html included within the download for HTML Kickstart on

© Put your info here