Note: The file "grids.css" is deprecated, use "cssgrids.css" instead.
The foundational CSS Grids provides a simple system for laying out content. The basic components are "grids" and "units". A "grid" (yui3-g) contains one or more "units" (yui3-u). The type of "unit" chosen describes how it should be sized (e.g. "yui3-u-1-2" takes up half the grid, "yui3-u-1-3" takes up one-third, et cetera). The only constraints for YUI3 Grids are that all "units" are children of a "grid". All you need to do is define a grid, one or more units inside it, and specify widths for them. Then stack and nest as required.
Getting Started
Include Dependencies
To use CSS Grids, include the following source file in your web page with the link element.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssgrids/cssgrids-min.css">
If you want responsive behavior, pull down Responsive Grids instead.
Using YUI CSS Grids
Unit Sizes
All of the sizing for YUI Grids is done using "units". Units can be subdivided up to 1/24 of the available width. The following table gives the various unit classes that can be applied.
| Class | Description |
|---|---|
.yui3-u |
Shrinks to fit unless a width is applied. |
.yui3-u-1 |
Fills 100% of the available width. |
.yui3-u-1-2 |
Fills 1/2 of available width. |
.yui3-u-1-3 |
Fills 1/3 of available width. |
.yui3-u-2-3 |
Fills 2/3 of available width. |
.yui3-u-1-4 |
Fills 1/4 of available width. |
.yui3-u-3-4 |
Fills 3/4 of available width. |
.yui3-u-1-5 |
Fills 1/5 of available width. |
.yui3-u-2-5 |
Fills 2/5 of available width. |
.yui3-u-3-5 |
Fills 3/5 of available width. |
.yui3-u-4-5 |
Fills 4/5 of available width. |
.yui3-u-1-6 |
Fills 1/6 of available width. |
.yui3-u-5-6 |
Fills 5/6 of available width. |
.yui3-u-1-8 |
Fills 1/8 of available width. |
.yui3-u-3-8 |
Fills 3/8 of available width. |
.yui3-u-5-8 |
Fills 5/8 of available width. |
.yui3-u-7-8 |
Fills 7/8 of available width. |
.yui3-u-1-12 |
Fills 1/12 of available width. |
.yui3-u-5-12 |
Fills 5/12 of available width. |
.yui3-u-7-12 |
Fills 7/12 of available width. |
.yui3-u-11-12 |
Fills 11/12 of available width. |
.yui3-u-1-24 |
Fills 1/24 of available width. |
.yui3-u-5-24 |
Fills 5/24 of available width. |
.yui3-u-7-24 |
Fills 7/24 of available width. |
.yui3-u-11-24 |
Fills 11/24 of available width. |
.yui3-u-13-24 |
Fills 13/24 of available width. |
.yui3-u-17-24 |
Fills 17/24 of available width. |
.yui3-u-19-24 |
Fills 19/24 of available width. |
.yui3-u-23-24 |
Fills 23/24 of available width. |
Building a Page Template
The sizing of "units" is done using percentages, so in order to build a "page" template, a width on the outermost container is required. The simplest approach to fixing your page size is to apply a width directly to the body element. Optionally, the page can be centered in the viewport by setting the margin to auto. The following creates a 960px, centered layout.
body {
margin: auto; /* center in viewport */
width: 960px;
}
The next step is to decide on the size of each "column" and choose the appropriate "unit". Remember, units sizes are percentage-based, so a bit of math may be required when designing with pixels rather than proportions. To create a 200 pixel wide sidebar, assuming a 960px layout, we would use a 5/24 unit ("yui3-u-5-24") for the narrow column, and a 19/24 ("yui3-19-24") for the main column.
<head>
<style>
body {
margin: auto; /* center in viewport */
width: 960px;
}
</style>
</head>
<body>
<div class="yui3-g">
<div class="yui3-u-5-24">
</div>
<div class="yui3-u-19-24">
</div>
</div>
</body>
Pixel Units
Some layouts have precise sizing requirements that may not always be fulfilled by percentage-based units. Custom unit sizes may be applied using the generic unit ("yui3-u"). Rather than overriding the YUI units, custom sizing should be done using your own semantic markup. To recreate the previous example with custom units, we will add IDs to the column containers. This examples uses "nav" and "main", but these should be tailored to your content.
<head>
<style>
body {
margin: auto; /* center in viewport */
width: 960px;
}
#nav {
width: 200px;
}
#main {
width: 760px;
}
</style>
</head>
<body>
<div class="yui3-g">
<div class="yui3-u" id="nav">
</div>
<div class="yui3-u" id="main">
</div>
</div>
</body>
<head>
<style>
body {
margin: auto; /* center in viewport */
width: 960px;
}
#nav {
width: 200px;
}
#main {
width: 760px;
}
</style>
</head>
<body>
<div class="yui3-g">
<div class="yui3-u" id="nav">
</div>
<div class="yui3-u" id="main">
</div>
</div>
</body>
Responsive Grids
To pull down Responsive Grids, include this link element on your page:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssgrids-responsive/cssgrids-responsive-min.css">
YUI Responsive Grids builds on top of the existing YUI Grids implementation. It adds a single new class name called .yui3-g-r. You can use this instead of using .yui3-g as you normally do. All elements with a class name of .yui3-u-*-* will automatically become responsive if they are direct descendents of a .yui3-g-r. Images will shrink to fit the viewport, and units will collapse to 100% width when the viewport is 767px or below.
For example, consider the two HTML snippets below. The first gist shows how regular YUI grids are written. These grids are unresponsive. They’ll always be one-thirds irrespective of the width of the screen. The second gist replaces the yui3-g with yui3-g-r, thereby making the one-third columns collapse to full width on lower screen widths.
<div class='yui3-g'> <div class="yui3-u-1-3">...</div> <div class="yui3-u-1-3">...</div> <div class="yui3-u-1-3">...</div> </div>
<div class='yui3-g-r'> <div class="yui3-u-1-3">...</div> <div class="yui3-u-1-3">...</div> <div class="yui3-u-1-3">...</div> </div>
If you want some HTML elements to remain in a grid even on smaller screens, wrap them in the standard .yui3-g
Media Queries
Responsive Grids listens to the following media queries. All yui3-u-* elements inside a yui3-g-r become 100% width at 767px or below.
| Type of Display | Media Query Widths |
|---|---|
| Default Displays | 980px and up |
| Large Tablets | 768px to 979px |
| Smaller Tablets and Large Phones | 767px and below |
| Phones | 480px and below |
Responsive Grids also comes with the following helper classes to show or hide content at different screen widths. Remember that to optimize performance and page load time, you should ideally determine what to show and hide on the server, instead of on the client.
| Helper Class Name | Description |
|---|---|
yui3-hidden-phone |
Content marked with this class will be hidden below 768px |
yui3-hidden-tablet |
Content marked with this class will be hidden between 768px and 979px |
yui3-hidden-desktop |
Content marked with this class will be hidden above 980px |