Subdividing in a Grid Framework

An Example of subdivision

The Problem

Basically all good designers know that using a grid when wireframing and making visual designs for a site is a good idea. But it’s surprising to me how many designers I talk to don’t use a CSS grid system framework (like on the actual site they build. They still choose to define widths, margins, and floats themselves.

It’s kind of baffling to me, since grid systems are great for getting rid of much of the uncertainty and tedious math that typically goes into laying out a page by hand. The other cool thing is that you can subdivide grids higher up in the DOM to make layouts that would be tricky to create by hand. Some might even resort to tables.

The Markup

Not shown here: the the div with a container_12 class that you need to start with to define how many columns your grid will have. Fun fact: there’s no reason you can’t have multiple containers with more columns on the same page when you want more or less detail.

<article id="product-details" class="grid_12">
    <div id="screenshots" class="nivoSlider grid_5 alpha"><img src="img/smb3reg.png" width="380" height="333" alt="" rel="img/smb3reg_thumb.png" /> <img src="img/smb_1.png" width="380" height="333" alt="" rel="img/smb1_thumb.png" /> <img src="img/smb_2.png" width="380" height="333" alt="" rel="img/smb2_thumb.png" /><img src="img/smb_3.png" width="380" height="333" alt="" rel="img/smb3_thumb.png" /></div>
    <div id="info" class="grid_7 omega">
        <div class="grid_4 alpha">
            <h3>Super Mario Bros. 3</h3>
            <p><img src="img/fivestars.png" width="75" height="16" alt="rating"> (4 Reviews)</p>
            <a href="javascript:;"><img src="img/writereview.png" width="90" height="28" alt="Write a Review"></a> </div>
        <div class="grid_3 omega"><a href="cart.php"><img src="img/addcartbig.png" width="220" height="64" alt="Add to Cart"></a> <a href="javascript:;"><img src="img/addwishbig.png" width="220" height="64" alt="Add to Wish List"></a> </div>
    <div id="description" class="grid_7 omega">
        <p>Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>

The alpha & omega classes are examples of subdividing a grid. Other grid systems may call it by another name, but it’s the same basic concept. These classes get rid of the extra margins that would occur wen placing grids within grids.

The Result

We’re left with a very nice, clean, and (most importantly) not broken layout. And we didn’t even have to resort to tables. The red lines in the above screenshot are present to show a rough idea of how the divs stack.