YUI Library Examples: CSS Grids: Fixed Page Template

CSS Grids: Fixed Page Template

A fixed grid starts with the basic markup structure of a yui3-g grid and some yui3-u units. For this example, we will create a 970px page and use yui-u-1-5 to make the left column 194px, and yui-2-5 to split the other 2 into 388px columns each.

Basic Markup Structure

<div class="yui3-g">
    <div class="yui3-u-1-5"></div>
    <div class="yui3-u-2-5"></div>
    <div class="yui3-u-2-5"></div>
</div>

<div class="yui3-g">
    <div class="yui3-u-1-5"></div>
    <div class="yui3-u-2-5"></div>
    <div class="yui3-u-2-5"></div>
</div>

Adding Content

As with all yui3-u-* units, to avoid layout complications, all column styling should be applied to a container within the unit rather than on the unit itself. For this demo we will add a container with the class content to contain our content, but you can feel free to call this whatever you like.

<div class="yui3-g">
    <div class="yui3-u-1-5">
        <div class="content">
 
        </div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">
 
        </div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">
 
        </div>
    </div>
</div>

<div class="yui3-g">
    <div class="yui3-u-1-5">
        <div class="content">
 
        </div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">
 
        </div>
    </div>
    <div class="yui3-u-2-5">
        <div class="content">
 
        </div>
    </div>
</div>

Fixing the Page Width

To fix the size of the page, simply apply a width to the outermost page container. For this example, we will apply the ID doc to the body element and apply the width there. To center the layout, set the margin to auto.

<style>
#doc {
    margin:auto; /* center in viewport */
    width: 970px; /* fix page width */
}
</style>

<style>
#doc {
    margin:auto; /* center in viewport */
    width: 970px; /* fix page width */
}
</style>

Adding Gutters and other Column Styling

The content container is where margins between columns ("gutters"), padding, borders, and other content styling can be applied.

<style>
.yui3-g .content {
    border: 2px solid #000;
    margin-right:10px; /* "column" gutters */
    padding: 1em;
}
</style>

<style>
.yui3-g .content {
    border: 2px solid #000;
    margin-right:10px; /* "column" gutters */
    padding: 1em;
}
</style>

Note:

Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.