Get to know the GRID … 24 columns that the VU site is built on
The Vanderbilt website backbone is a 24-column grid that is based on Blueprint. Our grid system is a condensed version of the blueprint system (for instance -we did NOT include the push and pull selectors.) The grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns. Using a grid system allows for a lot of flexibility and really quick development of new websites.
- A CSS reset that eliminates the discrepancies across browsers.
- A solid grid that can support the most complex of layouts.
- Typography based on expert principles that predate the web.
- Print styles for making any webpage ready for paper.
Demonstration of the GRID the Vanderbilt website is built on – shows all possibilities of columnar layouts
The Basics — Getting Started
The first thing you do, is surround your grid with a container:
<div class="container">
<p>Here's my super duper site!</p>
</div>
You then use div’s with one of the .span-x classes to set how many columns the elements should span. Here are some examples:
<div class="container">
<div class="span-24 last">
Header Full Width Would Be Here
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
Main content
</div>
<div class="span-4 last">
Right sidebar
</div>
</div>
Notice the “last” class, which every last element inside a container or another column needs.
You can also nest columns any way you want. Check out this file and this file for some more advanced examples of using grid.css. Here’s one example of nesting columns:
<div class="container">
<div class="span-24 last">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>
<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24 last">
Footer
</div>
</div>
Again, this is pretty simple when you get the hang of it. Just remember:
- Always use the “last” class in your last column.
- Make sure the columns in a row add up to 24 (i.e. “last” does not “fill in” the remaining columns for you)
and you should be fine.
The grid can do a lot more than this, however. You can prepend and append empty columns, add borders between columns, and use multiple containers to create almost any layout. The possibilities are endless! If you have questions about how to use the grid, contact our office.
The grid on the Vanderbilt News site
