cssgrids-units-source.mustache revision fa99b3cab01c8622489456804078ff7814fac260
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI 3.x: CSS Grids Units Example</title>
<link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
<link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/cssfonts.css" type="text/css">
<link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/cssgrids.css" type="text/css">
<style>
div.yui3-g {
text-align:center;
vertical-align:middle;
}
body {
margin-left: 10px; /* left gutter */
}
.content {
background:#424242;
border:dotted #999;
border-width:0 2px 2px;
color:#fff;
margin-right:10px; /* "column" gutters */
padding:5px 2px;
}
</style>
</head>
<body>
<div class="yui3-g">
<div class="yui3-u-1-2">
<div class="content">1/2</div>
</div>
<div class="yui3-u-1-2">
<div class="content">1/2</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div class="content">3/4</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-3">
<div class="content">1/3</div>
</div>
<div class="yui3-u-1-3">
<div class="content">1/3</div>
</div>
<div class="yui3-u-1-3">
<div class="content">1/3</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-3">
<div class="content">1/3</div>
</div>
<div class="yui3-u-2-3">
<div class="content">2/3</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-5">
<div class="content">1/5</div>
</div>
<div class="yui3-u-2-5">
<div class="content">2/5</div>
</div>
<div class="yui3-u-2-5">
<div class="content">2/5</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-3-5">
<div class="content">3/5</div>
</div>
<div class="yui3-u-2-5">
<div class="content">2/5</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-6">
<div class="content">1/6</div>
</div>
<div class="yui3-u-5-6">
<div class="content">5/6</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
<div class="yui3-u-3-8">
<div class="content">3/8</div>
</div>
<div class="yui3-u-3-8">
<div class="content">3/8</div>
</div>
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-3-8">
<div class="content">3/8</div>
</div>
<div class="yui3-u-5-8">
<div class="content">5/8</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-7-8">
<div class="content">7/8</div>
</div>
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
<div class="yui3-u-1-2">
<div class="content">1/2</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
<div class="yui3-u-1-2">
<div class="content">1/2</div>
</div>
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-12">
<div class="content">1/12</div>
</div>
<div class="yui3-u-5-12">
<div class="content">5/12</div>
</div>
<div class="yui3-u-5-12">
<div class="content">5/12</div>
</div>
<div class="yui3-u-1-12">
<div class="content">1/12</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-7-12">
<div class="content">7/12</div>
</div>
<div class="yui3-u-5-12">
<div class="content">5/12</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-11-12">
<div class="content">11/12</div>
</div>
<div class="yui3-u-1-12">
<div class="content">1/12</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-24">
<div class="content">1/24</div>
</div>
<div class="yui3-u-5-24">
<div class="content">5/24</div>
</div>
<div class="yui3-u-7-24">
<div class="content">7/24</div>
</div>
<div class="yui3-u-11-24">
<div class="content">11/24</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-17-24">
<div class="content">17/24</div>
</div>
<div class="yui3-u-7-24">
<div class="content">7/24</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-19-24">
<div class="content">19/24</div>
</div>
<div class="yui3-u-5-24">
<div class="content">5/24</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-23-24">
<div class="content">23/24</div>
</div>
<div class="yui3-u-1-24">
<div class="content">1/24</div>
</div>
</div>
</body>
</html>