Blueprint CSS is a pretty quick way to design complex grids with CSS. The idea is basic – include the necessary styles, and you get a container for your site with fixed with of 960 px. So it’s not a universal solution, but at least if you’re comfortable with the width of 960, Blueprint will prevent you from giving up and using tables.
There are just 3 compressed CSS files to include, the third one is only for IE support.
<link rel=“stylesheet” href=“css/blueprint/screen.css” type=“text/css” media=“screen, projection”>
<link rel=“stylesheet” href=“css/blueprint/print.css” type=“text/css” media=“print”>
<!–[if IE]>
<link rel=“stylesheet” href=“css/blueprint/ie.css” type=“text/css” media=“screen, projection”>
<![endif]–>
Then a simple container div will give you a centered area 960 pixels wide:
-
<div class=“container”>
-
I am a container.
-
</div>
You can attach any of your own styles to that container div, so I had an extra class that painted the container silver for better visualization.
Let’s say we are going to need a header, a footer, a narrow right sidebar, a narrow left sidebar, and wide area in the center for content. Blueprint provides you with a bunch of classes ranging from span-1 for 1 column to span-24 for full 100% width. So for a full-width header and footer we create the following markup:
<div
class=“container”>
<!– header –>
<div
class=“span-24 header”>
</div
>
<!– footer
–>
<div
class=“span-24 footer”>
</div
>
</div
>
What about the content area with 2 sidebars? With Blueprint CSS, your spans on one row have to equal to 24, so we can either do 1-22-1, or 2-20-2, or 3-18-3, and so on. 8-8-8 would get us a page equally divided into three divs. Let’s go the 2-20-2 route:
<div class
=“container”> <!– header –
>
<div class=“span-24 header”>Header </div>
<!– content –>
<div class=“span-2″>I am the left column</div>
<div class=“span-20″>I am the main content area</div>
<div class=“span-2 last”>I am the right column</div>
<!– footer –>
<div class=“span-24 footer”>Footer</div>
</div>
There’s another nuance to the markup above – the right sidebar has to have the last class. If I add some additional coloring to those divs, here’s a sample layout I’ve built with the code above:
But wait, there’s more. You can host divs inside divs without worrying about them overflowing. Let’s say we wanted to make the right column wider, up to 10 columns, which would make the central column become a span-12. And inside that right sidebar that’s a span-10 we wanted to host 2 divs per line, span-5 each, perhaps displaying an image, or a square ad. You can host two span-5 divs inside a span-10, or even a span-10 ad inside a span-10:
<div class
=“container”>
<!– header –
>
<div class
=“span-24 header”>Header</div
>
<!–
content –
>
<div class
=“span-2″>I am the
left column</div
>
<div class
=“span-12″>I am the main
content area</div
>
<div class
=“span-10 last”>
<div class
=“span-10 last”>Ads</div
>
<div class
=“span-5″>I am some kind of ad</div
>
<div class
=“span-5 last”>I am some kind of ad</div
>
<div class
=“span-5″>I am some kind of ad</div
>
<div class
=“span-5 last”>I am some kind of ad</div
>
<div class
=“span-5″>I am some kind of ad</div
>
<div class
=“span-5 last”>I am some kind of ad</div
>
<div class
=“span-5″>I am some kind of ad</div
>
<div class
=“span-5 last”>I am some kind of ad</div
>
</div
>
<!– footer –>
<div class=“span-24 footer”>Footer</div>
</div>
With some colorful background we get this grid:

There’s a pretty good quickstart tutorial on Blueprint github Wiki page. There’s also an example page that implements a somewhat complicated grid:

Leave the first comment ▶