CSS3 Grid Principals #4 Making Space with Prefix/Suffix

When we last left our HTML project, we faced a small problem: How do we fill a 12-column grid if we’d like to have some empty space between our page divisions? Luckily, the 960 Grid System addresses this, and makes it rather easy to add space before and after an element.

Now keep in mind – this is only addressing the horizontal spacing issues. Actually, everything that the 960 system does is in relation to the horizontal, because it’s based on floating the page divisions. We’ll touch on floating later, as well as creating margins between the division rows. Often, the default spacing will work just fine, and in our birthday party example, we’ll be leaving the vertical as is.

Prefix Syntax

<div class=”grid_3” class=”prefix_2”>

Adding a prefix class to your < div > element will create a blank space to the left occupying the specified number of columns. The example given above, for instance, would create < div > 3 columns-wide that has a blank space of 2 columns to its left. That would look something like this:

Suffix Syntax

<div class=”grid_3” class=”suffix_2”>

Adding a suffix class to your < div > element will create a blank space to the right occupying the specified number of columns. The example given above, for instance, would create < div > 3 columns-wide that has a blank space of 2 columns to its right. And that would look something like this:

Creating Our Layout Space

So through a combination of both the prefix and suffix classes, you should be able to make any blank space that you want. Obviously, you can use either/or to accomplish the same thing in most instances, so it’s flexible to the point of redundancy, which is a nice thing.

Let’s take another look at our layout and see where our spaces need to go:

In order to accomplish this, we will need to add a prefix_1 class to our section2 < div >, and a suffix_1 to the section3 < div >. Then add a suffix_1 to the footer1 and footer2. For some bonus points (not really), see if you can re-create the same result using a different prefix/suffix combination. Using the following sample HTML:

<div id="layout_960" class="container_12"> 
 
    <div id="header" class="grid_12">
    THIS IS OUR HEADER
    </div>
 
    <div id="section1" class="grid_4">
    THIS IS OUR SECTION ONE
    </div>
 
    <div id="section2" class="grid_3">
    THIS IS OUR SECTION TWO
    </div>
 
    <div id="section3" class="grid_3">
    THIS IS OUR SECTION THREE
    </div>
 
    <div id="footer1" class="grid_7">
    THIS IS OUR FOOTER ONE
    </div>
 
    <div id="footer2" class="grid_3">
    THIS IS OUR FOOTER TWO
    </div>
 
</div>

Let’s add the appropriate classes to our < div > elements:

<div id="layout_960" class="container_12"> 
 
    <div id="header" class="grid_12">
    THIS IS OUR HEADER
    </div>
 
    <div id="section1" class="grid_4">
    THIS IS OUR SECTION ONE
    </div>
 
    <div id="section2" class="grid_3" class="prefix_1">
    THIS IS OUR SECTION TWO
    </div>
 
    <div id="section3" class="grid_3" class="suffix_1">
    THIS IS OUR SECTION THREE
    </div>
 
    <div id="footer1" class="grid_7" class="suffix_1">
    THIS IS OUR FOOTER ONE
    </div>
 
    <div id="footer2" class="grid_3" class="suffix_1">
    THIS IS OUR FOOTER TWO
    </div>
 
</div>

For now, your page isn’t going to look much different, but as we start adding content to our individual page divisions, these spaces will be crucial. Sometimes, its best not to cram your page to the gills with content – let your content breathe a little – and it will make for a much cleaner design in the long run.

Download Source Files

The post CSS3 Grid Principals #4 Making Space with Prefix/Suffix appeared first on The Web, Made Easy! | Web Tutorials, Tips, and Articles.