Understanding Fluid Grids

Using a fluid grid system presents a couple extra challenges beyond using a fixed width one, but the basic concepts are similar.

In fact, even if you have no plans to ever build a fixed width site, you might want to considering downloading and studying the 960 Grid System. The reason I suggest this is that Nathan Smith’s vision in the 960 was very influential. For that reason, if you study his stylesheets, you will learn how a lot of other grid systems work—such was his influence.

For example, if you go to the site for the Variable Grid System, you will  read this developer based their grid on the 960. So if you already know how to use the 960, you’re well on your way to understanding how to use this one, because the class names are identical.

NOTE: I’ve noticed over the past year that the Variable Grid System website occasionally goes down. If you cannot access it today,  you can download a grid file I generated using the system.  Inside the zip file you download will be a 12-column percentage-based CSS grid named fluid_grid.css.

Generate the Grid

First of all, at the Variable Grid System website, let’s generate a new grid.

For variety (and simple math for this demo), set the column width to 80px. Leave the other values at their defaults: 12 columns, 20px gutter width.

This will mean that we are using a 1200px grid, with 1180px of content area.

How does this work out? The math is simple.

Each column is 80px. To make the 20px of gutter, 10px is assigned to both margin-left and margin-right. In other words, each column takes up 100px. Therefore, our 12 columns take up 1200px, but the 10px margin-left on the first column and the 10px margin-right on the final column mean that there’s 1180px of content area.

Preview The Grids

With those numbers active, open each of the Preview links in separate tabs. Compare the differences.

The initial preview link creates a file that acts exactly like a wider 960 grid system.

The 960 Fluid Preview link, on the other hand, shows us a grid where the columns resize when the browser window is resized.  This is the result of specifying all widths in percentages rather than pixels.

Now download the fluid grid CSS file.

Put it in a new folder, along with an HTML skeleton file.

Wire up that stylesheet to the skeleton file:

<link href=”fluid_grid.css” rel=”stylesheet”>

Make a new css file and save it as mystyles.css in your site folder. Now wire that stylesheet up to your HTML file, too. Put this reference after the grid style reference.

<link href=”mystyles.css” rel=”stylesheet”>

Build Some Boxes

To get a grasp of the system, we’re just going to throw some empty DIVs on the page and then style them with some background colors, and see how the variable grid system’s classes behave.

Like with the original 960 Grid System, this system depends on an outer “uber-class” that functions like a wrapper for your content.

So inside the body of your document, make a DIV with a class of container_12. (If you used a number other than 12 for your columns, that class name would correspond to the number of columns you used).

Inside that DIV make four DIVs. Give each a class of grid_3. In other words, we’ll have four boxes, each taking up three columns.

In order to see what these empty DIVs are doing, though, we need to add some styles to them: after all, if the DIVs are empty, we won’t see them by default.

In mystyles.css add the following styles (I’m putting them on single lines only because I’m currently writing in the WordPress post editor, and it’s fighting attempts to style it more pleasingly).

.pink {  background-color: pink;  }

.powderblue {background-color: powderblue; }

.seagreen {background-color: seagreen; }

Feel free to look up color names, or use your own hex specifications.

Now add the pink class to each of your inner DIVs.

The code for all DIVs other than the .container_12 DIV should look like this:

<div class=”grid_3 pink”></div>

Finally, add to your mystyles.css file the following style:

.container_12  div {
min-height: 100px;
margin-bottom: 10px;
border-radius: 10px;

Test your page. It should look something like this:

Screen Shot 2013-07-06 at 5.50.56 PM

Now lets add some more DIVs. Below that row, put in three DIV, each with the grid_4 and pink classes.

<div class=”grid_4 pink”></div>
<div class=”grid_4 pink”></div>
<div class=”grid_4 pink”></div>

Your layout should now look something like this:

Four + Three Column Layout

Finally, add a row of 12 DIVs each with grid_1 and powderblue classes affixed.  Then add another DIV with a class of grid_12 and a class of seagreen. 

Your layout should look like this:

Multi Columns

At this point, you should be getting the essence of the system.

Remember: each “row” needs to add up to 12.

Remember also, that you can use the prefix and suffix classes if you want to add spacing. A class of prefix_3, for example, will add three columns of padding to any element you’ve added it to.