d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <meta http-equiv="content-type" content="text/html; charset=utf-8">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <title>YUI 3.x: CSS Grids Units Example</title>
fa99b3cab01c8622489456804078ff7814fac260Matt Sweeney <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
fa99b3cab01c8622489456804078ff7814fac260Matt Sweeney <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/cssfonts.css" type="text/css">
fa99b3cab01c8622489456804078ff7814fac260Matt Sweeney <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/cssgrids.css" type="text/css">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney/* everything below is custom styling to demonstrate how to create a page layout using yui grid units */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin:auto; /* center in viewport */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 970px; /* fix page width */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney/* arbitrary content styling */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#hd, .yui3-g .content, #ft {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 5px solid #ccc;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney height: 400px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-right: 10px; /* gutter between columns */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney height: 40px;