Grid Tutorial

Web grid allows you to focus on web layout usability and put aside worries about how to create the template. The page structure takes just minutes to create as you will find out in a few minutes. The layout elements can be shuffled around easily until you are happy with the template. The result is XHTML 1.0 Strict and cross browser compatible. And it works in IE6 as well.

Web Grid Layout "Hello World"

Tutorial goal - this is how the layout created in this tutorial will look like

In the course of this tutorial, which takes just a few minutes, you are going to create page structure presented in the accompanying draft. If you want to see the result as HTML / CSS done and dusted please have a look at the tutorial goal page.

The template you will be building consists of three main horizontal sections - header, footer and contents. The latter contains two columns: left hand navigation and main content. To make things a little more interesting the main content has been divided further and features two top columns, one middle row and three bottom columns.

Prepare the playground

In order to follow the tutorial and do it all yourself you will need an empty XHTML document (preferably Strict), grid CSS and probably some styling of generic elements, like headers, paragraphs and so on. If you are in a hurry (and who isn't) you can use the startup bundle I have prepared for that occasion. It consists of everything you are going to need for the kickstart: grid.css, tutorial.css and tutorial.html

Define page width

First of all define page width. In order to do so add div element which would serve as a page container and set its class to "gu6". That way you set width to 6 Grid Units.

tutorial.html
  1.     <div class="gu6">
  2.     </div>
  3. </body>

Grid Units help you to define width of elements quickly. You decide how many Grid Units the width should be and Simple Grid System takes care of translating it into pixels. You can use the default Grid Unit (140px) or create your own with the grid generator on Simple Grid System homepage.

Style page container

The page container has width although it lacks any other styling and looks poor. Add another class "page" to it and add some styling in your CSS file. Just centering the page and making it stand out would be enough.

tutorial.html
  1.     <div class="page gu6">
  2.     </div>
  3. </body>
tutorial.css
  1. body {background: #ccc;}
  2. .page {margin: 0 auto; background: #fff;}

Class "gu6", like all the other "guX" classess, defines and should define only width. Progressing through the tutorial you will see that "guX" classes are being reused all the time during template building. Therefore they should stay "clean" and provide only what the name states - number of Grid Units worth of width.

That is why it takes adding another class to style the page container, like in the example above. However, doing so we separate styling functions of classes and that works semantically nicely. Applied classes "page gu6" mean together "page being 6 grid units wide".

Create main template sections

Now you need some structure for main template sections. Within the page container create three rows (class "row"). They will become header, contents and footer. Inside each row put single column and define its width as 6 GU (class "col gu6").

tutorial.html
  1.     <div class="page gu6">
  2.         <div class="row">
  3.             <div class="col gu6">
  4.             </div>
  5.         </div>
  6.         <div class="row">
  7.             <div class="col gu6">
  8.             </div>
  9.         </div>
  10.         <div class="row">
  11.             <div class="col gu6">
  12.             </div>
  13.         </div>    
  14.     </div>
  15. </body>
  16.  

Please keep in mind to put columns inside rows and content inside columns. It is quite easy to remember and keeps you safe. The result achieved by putting content directly inside a row will probably disappoint you.

Although as a bonus you can put rows inside columns. That way you can nest columns virtually infinitely. I agree it might seem pointless at first and it would be so if the layouts were kept really basic. In reality they are a bit more complicated than that and this tutorial hopes to produce an example.

Last but not least please note how column nesting is semantically correct as well - you have rows of columns and each column can contain more rows of columns and so on.

Half-baked but looks good

The high level structure is done, but it would be nice to see the result. Let's add some styling then. Each row contains different section which probably should be styled in its own way. Add an extra class to each row, for example "pg-header", "pg-contents" and "pg-footer". Before you jump on to your CSS file though, create some simple content inside each column to make it visible.

Let's have a look at the example below.

tutorial.html
  1.     <div class="page gu6">
  2.         <div class="row pg-header">
  3.             <div class="col gu6">
  4.                 <div class="content">
  5.                     <h1>Web Grid Layout "Hello World"</h1>
  6.                 </div>
  7.             </div>
  8.         </div>
  9.         <div class="row pg-contents">
  10.             <div class="col gu6">
  11.                 <div class="content">
  12.                     <p>This is content</p>
  13.                 </div>
  14.             </div>
  15.         </div>
  16.         <div class="row pg-footer">
  17.             <div class="col gu6">
  18.                 <div class="content">
  19.                     <p>This is footer</p>
  20.                 </div>
  21.             </div>
  22.         </div>    
  23.     </div>
  24. </body>
  25.  
tutorial.css
  1. body {background: #ccc;}
  2. p {font-size:1.2em; line-height: 1.5em;}
  3.  
  4. .page {margin: 0 auto; background: #fff;}
  5.  
  6. .pg-header {margin-bottom: 20px;}
  7. .pg-header .content {background: #333;}
  8. .pg-header h1 {font-size:3.2em; color:#fff;line-height:1.125em;}
  9.  
  10. .pg-contents .content {padding:10px; border:1px solid #f00;margin-bottom:20px;}
  11.  
  12. .pg-footer .content {background: #333;}
  13. .pg-footer .content p {color:#fff;}

Each row has now been extended with an extra class defining its purpose. That semantic approach allows to keep clean CSS definition of class "row" and also style the rows independently. However, you need to be extra careful when styling row containers directly.

Rows are part of the Grid System which defines their width and horizontal spacing and that needs not be tweaked unless you know exactly what you are after. Because of infinitive nesting ability, rows are very sensitive about left and right padding, margin and border so it is strongly recommended no to change these settings. Defining row's background or top/bottom border could surprise you as well.

Nevertheless there are some safe settings for rows, like for instance top and bottom margin. You may have noticed that page header in the example above has bottom margin defined, although it is the only setting applied directly to the row. Other then that the "pg-" classes were used to style elements down the cascade only and I would rather support that approach.

Add column for navigation

There is already one column inside page contents, it is 6 Grid Units wide and fills in the whole middle section nicely. However, the goal is to have two columns - one for left hand side navigation and another one for actual content. Let's see how easy it is to split a column.

First, reduce size of the existing column from 6 gu to 4.5 gu (simply change class from "gu6" to "gu4_5"). Keep the content which is already inside that column. Now create another column just before the one you have adjusted a moment ago. Give it width of 1.5 gu (class "gu1_5"). Both columns will fill the whole middle section because 4.5gu + 1.5gu = 6 gu.

Now add navigation inside newly created column. Not a bad idea would be to style it slightly as well. If you don't want to spend time on it you may also replicate the styling from the example below. I imagine your result would similar to the following:

tutorial.html
  1.     <div class="page gu6">
  2.         <div class="row pg-header">
  3.             <div class="col gu6">
  4.                 <div class="content">
  5.                     <h1>Web Grid Layout "Hello World"</h1>
  6.                 </div>
  7.             </div>
  8.         </div>
  9.         <div class="row pg-contents">
  10.             <div class="col gu1_5">
  11.                 <div class="content">
  12.                     <p>Left hand navigation</p>
  13.                     <ul class="nav-tree">
  14.                         <li><a href="http://webnicer.com">webnicer.com</a></li>
  15.                         <li><a href="http://webnicer.com/simple-grid-system.html">Simple Grid System</a></li>
  16.                         <li><a href="http://webnicer.com/simple-grid-system/tutorial.html">Tutorial</a></li>
  17.                     </ul>
  18.                 </div>
  19.             </div>
  20.             <div class="col gu4_5">
  21.                 <div class="content">
  22.                     <p>This is content</p>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <div class="row pg-footer">
  27.             <div class="col gu6">
  28.                 <div class="content">
  29.                     <p>This is footer</p>
  30.                 </div>
  31.             </div>
  32.         </div>    
  33.     </div>
  34. </body>
tutorial.css
  1. body {background: #ccc;}
  2. p {font-size:1.2em; line-height: 1.5em;}
  3.  
  4. .page {margin: 0 auto; background: #fff;}
  5.  
  6. .pg-header {margin-bottom: 20px;}
  7. .pg-header .content {background: #333;}
  8. .pg-header h1 {font-size:3.2em; color:#fff;line-height:1.125em;}
  9.  
  10. .pg-contents .content {padding:10px; border:1px solid #f00;margin-bottom:20px;}
  11. .pg-contents .content ul.nav-tree {padding:0 0 0 1.5em;}
  12. .pg-contents .content ul.nav-tree li {font-size:1.2em; line-height:1.5em; text-align:left;}
  13.  
  14. .pg-footer .content {background: #333;}
  15. .pg-footer .content p {color:#fff;}

Adding an extra column could be described as easy and relaxed process. There are no extra "first" nor "last" classes and there is a great bonus which comes with it: you can change order of columns however you like (cut and paste only) with no side effects. Comes pretty handy especially with CMS templates where the modules don't have to know if they occupy first, last or whatever else column.

Shuffling the columns around you only need to remember that sum of widths of elements within a container cannot be greater then the container's width. That "limitation" can hardly be called surprising and is rather intuitive.

Create nested columns inside main content column

If you look at the layout draft, you will see the main content column consisting of three rows which have respectively two, one and three columns. It is time to add sub-colums.

Let's focus on the main content column. That is the one being 4.5 gu wide (class "gu4_5"). First get rid of the content div for now (you can copy it to clipboard, it will be useful in a minute) and create three rows directly inside the column. Now, inside first row create two columns 2.25 GU each (class "gu2_25") and inside each column add the content div. Then inside second row create one column 4.5 GU (class "gu4_5") and again add the content div inside. Finally, inside third row create three columns 1.5 GU each (class "gu1_5") and inside each column add the content div.

Let's compare our results.

tutorial.html
  1.     <div class="page gu6">
  2.         <div class="row pg-header">
  3.             <div class="col gu6">
  4.                 <div class="content">
  5.                     <h1>Web Grid Layout "Hello World"</h1>
  6.                 </div>
  7.             </div>
  8.         </div>
  9.         <div class="row pg-contents">
  10.             <div class="col gu1_5">
  11.                 <div class="content">
  12.                     <p>Left hand navigation</p>
  13.                     <ul class="nav-tree">
  14.                         <li><a href="http://webnicer.com">webnicer.com</a></li>
  15.                         <li><a href="http://webnicer.com/simple-grid-system.html">Simple Grid System</a></li>
  16.                         <li><a href="http://webnicer.com/simple-grid-system/tutorial.html">Tutorial</a></li>
  17.                     </ul>
  18.                 </div>
  19.             </div>
  20.             <div class="col gu4_5">
  21.                 <div class="row">
  22.                     <div class="col gu2_25">
  23.                         <div class="content">
  24.                             <p>This is content</p>
  25.                         </div>
  26.                     </div>
  27.                     <div class="col gu2_25">
  28.                         <div class="content">
  29.                             <p>This is content</p>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.                 <div class="row">
  34.                     <div class="col gu4_5">
  35.                         <div class="content">
  36.                             <p>This is content</p>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 <div class="row">
  41.                     <div class="col gu1_5">
  42.                         <div class="content">
  43.                             <p>This is content</p>
  44.                         </div>
  45.                     </div>
  46.                     <div class="col gu1_5">
  47.                         <div class="content">
  48.                             <p>This is content</p>
  49.                         </div>
  50.                     </div>
  51.                     <div class="col gu1_5">
  52.                         <div class="content">
  53.                             <p>This is content</p>
  54.                         </div>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.         <div class="row pg-footer">
  60.             <div class="col gu6">
  61.                 <div class="content">
  62.                     <p>This is footer</p>
  63.                 </div>
  64.             </div>
  65.         </div>    
  66.     </div>
  67. </body>
  68.  

Have I mentioned before that you can put rows into columns? It turns out quite handy sometimes. Especially when the layout you are working on is quite granular. Luckily, using col-row-col combination you can nest columns without limits, virtually infinitely.

For an example, there is a 4.5 GU column nested inside another 4.5 GU column in the code above. You could repeat that countless number of times and unless you reach some bug-triggering depth of HTML structure it will work fine. Actually, if you are into pushing the limits and have a few spare minutes to try it out, please drop me a line with the result - just browser, its version and nesting level when all went tits up.

Thank you for reading this tutorial, I hope you found it useful. Please do not think twice before you leave some comment.

Happy Gridding!