Layout pages with ease using grids.css
Experience has shown that certain layouts tend to work better than others. The Interactive Advertising Bureau (IAB), that tries to standardize ads displayed on the Web, regularly publishes guidelines for their size. As screen resolutions increase, we can make use of more screen real estate, but we still have to support older, narrower displays so it is better if we stick to narrower, more conservative sizes. grids.css allows us to easily arrange the components in a page in several of the most common layouts or combine them to build our own.
In comparison to the other three CSS Tools, the grids.css file is a lot bigger, containing a much wider range of selectors and rules. This tool is used in a different way than the other two; instead of just linking to the file and forgetting about it, you will need to make use of specific class names, give element-specific IDs, and use the correct nesting structures in order to have your pages laid out in the format that you want.
One of the features of the Grids CSS Tool is that it automatically centers your content in the viewport keeping your content within a fixed width, avoiding the distortion that often happens when adjusting to various screen widths. Another of its features is the fact that the footer, if you wish to use it, is self-clearing and stays at the bottom of the page, whichever layout template you're using.
Setting up your page structure
Yahoo! recommends a particular basic structure to use when building web pages; your document should be broken up into three different content sections: a header <div>, a body <div>, and a footer <div>. All three of these different sections should also be wrapped in an outer containing <div>. The following code shows how pages should initially be structured:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Mark-up Example</title> <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> </head> <body> <div> <div id="hd">This is your Header</div> <div id="bd">This is the body</div> <div id="ft">This is your footer</div> </div> </body> </html>
You can use one of the four preset page widths when constructing pages linked to the Grids CSS Tool by giving the outer containing <div> element one of the following values for its ids attribute:
docfor a 750 pixel wide page geared towards resolutions of 800x600doc2for a 950 pixel wide page that is aimed at 1024x768 resolutionsdoc3for a full 100% fluid page width suitable for all monitor resolutionsdoc4for a 974 pixel page width, an increasingly popular and robust width
All four of these page width specifications have auto margins and have their content aligned to the left. The width is specified in em units, as these units of measurement scale better across platforms during text size changes driven by the visitor. Using a combination of templates and different class attributes in your mark-up you can specify a wide range of different page layouts.
The third layout, for 100% page widths, includes a 10 pixel margin on both sides of the page so as just to prevent any bleed between the page contents and the browser's user interface color.
The basic building blocks of your pages
Going back to the recommended layouts of pages, the developers at Yahoo! recognize that the main content, the body <div id="bd">, of your page will probably be split into different blocks itself, featuring perhaps a navigation menu on one side of the page as well as a main block of content.
These blocks of content can be represented in your HTML code by <div> elements with a class attribute of yui-b to denote a basic block. The main block should then be wrapped in a container <div> with a class attribute of yui-main. The main block is where your primary page content should reside. Although the basic yui-b block that is not nested within a yui-main block is known as the secondary block, it can still appear before the main block in your code and can appear either on the left or right-hand side of the page. From now on, we won't be showing the HTML outside of our <body> as it doesn't change:
<body>
<div id="doc3">
<div id="hd">This is your Header</div>
<div id="bd">This is the body
<div class="yui-b">This is the secondary block</div> <div class="yui-main"> <div class="yui-b">This is the main block</div> </div>
</div>
<div id="ft">This is your footer</div>
</div>
</body>
In order to use these content-organizing blocks, you'll also need to specify one of six preset templates. These block templates specify the width of the two blocks in much the same way as the three page templates specify page width. The following block templates are available:
.yui-t1for a 160 pixel secondary block on the left.yui-t2for a 180 pixel secondary block on the left.yui-t3for a 300 pixel secondary block on the left.yui-t4for a 160 pixel secondary block on the right.yui-t5for a 180 pixel secondary block on the right.yui-t6for a 300 pixel secondary block on the right
In all of these templates, the main content block will take up the remaining space on the page (which is dependent on the page template in use). To use these templates, you just need to add one of them as a class attribute of the outer containing <div> element, whichever template you wish to use.
<body> <div id="doc3" class="yui-t1"> <div id="hd">This is your Header</div> <div id="bd"> <div class="yui-main"> <div class="yui-b">This is the main block</div> </div> <div class="yui-b">This is a block</div> </div> <div id="ft">This is your footer</div> </div> </body>
We have also changed the order of the main and secondary blocks. You might wish your visitors to see the information they've asked for first and then the secondary panel, be it comments, info-boxes or banners. Even though the secondary panel appears later in the code, it will still be shown on the left-hand side of the screen. The way it is ordered on the screen is independent of the order in which it is pumped to the page. If at a later stage, we change the .yui-t1 template into its mirror .yui-t4 we don't need to change the order of the content sent to the page.
The addition of the blocks and additional template will produce a page with a layout as shown in the following screenshot. Again styling has been used for clarity:
These templates, combined with the three different document widths and the two types of class attributes, added to the different block configurations give you a total of up to 42 different visual presentation models. But that's not all; your main content block can be further subdivided with grids and units.
Grid nesting
If you would like to split your main block of content into two or more different columns, you can nest some more <div> elements within your main block. You need to add a container <div> to the main block. This is known as a grid. The two new columns that are formed in the grid are known as units and are made up of two nested <div> elements within the grid <div>.
To make a grid, the container <div> within the main block <div> should be given a class attribute of yui-g and each unit <div> should have a class attribute of either yui-u first for the first unit or yui-u for the second unit, as illustrated by the following code sample:
<body>
<div id="doc" class="yui-t1">
<div id="hd">This is your header</div>
<div id="bd">
<div class="yui-b">This is the secondary block</div>
<div id="yui-main">
<div class="yui-b">This is the main block
<div class="yui-g"> <div class="yui-u first">This is a unit</div> <div class="yui-u">This is another unit</div> </div>
</div>
</div>
</div>
<div id="ft">This is your footer</div>
</div>
</body>
The following screenshot shows how the grid units will appear on the page:
Due to the lack of support of the :first-child pseudo-selector in some A-grade browsers, when nesting grids within grids (to make four columns within the main content block for example), the first grid should have a class attribute of yui-g first.
By default, the two unit columns that make up a grid are of equal width, but you can easily deviate from this by using one of five "special grids", which specify more than two columns or a range of different column proportions. The five special grids have class selectors of:
.yui-gbfor three columns of equal width.yui-gcfor two columns where the first has double the width of the second.yui-gdfor two columns where the second has double the width of the first.yui-gefor two columns where the first has three times the width of the second.yui-gffor two columns where the second has three times the width of the first
We can see one of these special grids in action by simply changing the class name of our grid in the previous example:
<body> <div id="doc" class="yui-t1"> <div id="hd">This is your header</div> <div id="bd"> <div class="yui-b">This is the secondary block</div> <div id="yui-main"> <div class="yui-b">This is the main block <div class="yui-gb"> <div class="yui-u first">This is a unit</div> <div class="yui-u">This is another unit</div> A third unit created with the yui-gb special grid </div> </div> </div> </div> <div id="ft">This is your footer</div> </div> </body>
This change in class name will result in our grid appearing as shown in the following screenshot:
There is a large number of different variations of page layouts that the Grids CSS Tool allows you to implement. All you need to do is define your pages in the correct structure, and give the right elements the right class attributes and IDs. It may seem a little daunting at first, trying to remember all those different class names and nesting rules, but with a little bit of practice, it all becomes second nature.
In addition to the online documentation and cheat sheets, the CSS Grids page on the YUI developer site also points to a very nifty little tool that allows you to generate page templates for use with grids.css, the Grid Builder tool. Simply choose your desired layout, add in any header or footer text and the tool will then generate the basic template code for you to copy and paste into your own files:
