How to use Grids in Your Design and Why, Part II

This post was Written by Juan Sebastián Celis Maya, of Evolucionemos.com and Sebascelis.com.

As I promised in my last post, today we are going to see how grids can be used inside grids and how we can fill in spaces without having to add divs with the specified size.

As we want to get the most of our grid system, we need to understand how it works, and how we can adapt it to our needs.

Do I always need a div to fill in spaces?

Of course not… Actionly there’s a better way to do this. Sometimes, when we are faced to create a nice web design, creativity is not a problem, but placing our imagination on the web is. Distributing and organizing content has never been easier since the grids were brought about.

As we saw in the first part of this series, all we need is to make sure that the screen is filled in each row. And in our examples, we talked about having 3 divs, with 4 units each one. So the sum was 12.

Introducing Prefixes and Suffixes

If we need to add some space before the div, we need a prefix.

And of course, if we need to add some space after the div, we need a suffix.

Prefixes and suffixes have the same 12 sizes;

prefix_1, prefix_2, prefix_3, prefix_4, prefix_5, prefix_6, prefix_7, prefix_8 , prefix_9 , prefix_10, prefix_11, prefix_12

and

suffix_1, suffix_2, suffix_3, suffix_4, suffix_5, suffix_6, suffix_7, suffix_8, suffix_9, suffix_10, suffix_11, suffix_12

Prefix example:

<div class="grid_4 prefix_4"></div>

<div class="grid_4"></div>

If you take a look, you’ll note that here we have a 4 unit div (with a 4 unit prefix) followed by another 4 units div. So both divs sums 8 and the prefix (which is 4) gives a total of 12.

Suffix example:

<div class="grid_4"></div>

<div class="grid_4 suffix_4"></div>

Equally, here the sum is 12, because we add a 4 unit div, and another 4 unit div with a 4 unit suffix.

You can use any size of divs and prefixes and suffixes you want. All you need is to make sure the sum of all sizes is 12, because if not, the div will drop for space absence.

Using grids inside grids

Even with all the posibilities we can count on right now, we may want to get a little more advanced using grids. I won’t explain why you may need to use grids inside grids, but it all has to do with situations when we need to group content somehow.

To insert some small divs within a bigger one, we can’t simply anidate the sourcecode. But wait! there’s a catch.

You need to tell the grid wich one’s first and wich one’s last.

Introducing Alpha and Omega

Let’s suppose we have a big div containing some divs. The first of all, we should have an additional parameter as we used prefixes and suffixes. The parameter for the first one is alpha. And so, the parameter for the last div is omega.

Alpha and Omega Example

<div class="grid_8">

<div class="grid_2 alpha"></div>


<div class="grid_4"></div>
<div class="grid_2 omega"></div>
</div>
<div class="grid_4"></div>

<div class="grid_4"></div>

As we can see, within the 8 unit div we added a 2 unit div, a 4 unit div, and another 2 unit div. The first element has the alpha parameter and the last element has omega.

You may be wondering… what could happen if I don’t use alpha and omega?

Well… the width of the divs inside the bigger div, won’t add to what is needed and in consequence some divs will drop, messing up everything we did.