Exercise 8: Modular Grids with CSS
The grid in this exercise was adapted from the 960 grid system. When you get a chance, you should take a look and download the template files from there, too. Of course you may well prefer to construct your own grid for your project.
Here’s a brief description of the concept going on here: Very often we want to crate a grid-based design, where the content is structured with a system of columns and subdivisions. Each div (or list, or paragraph) will be a certain number of grid “modules” wide. So instead of specifying the pixel width we want for every element using IDs and CSS, we define a system of width classes (.w1, .w2, .w3 ….) that match our module widths. Then we apply them to each HTML element we want to control. We also define two float classes (.left and .right) and use these in conjunction with the width to control the layout. A two-column div that needs to be floated right would then just get the two corresponding classes: <div class="w2 right">bla bla</div>. A 1-column div that needs to be floated left would look like this: <div class="w1 left">Bla bla</div>.
In general we don’t want to go too crazy with this system and apply width classes to every single element. But it’s definitely useful for the primary containers on a page.
Update: Solutions are now included with the files.