CSS Grids: Available Page Widths
CSS Grids includes four page widths to choose from: 100%, 750px, 950px and 974px. The non-100% widths are available fixed or fluid. All are centered within the viewport.
Setting the Page Width with YUI CSS Grids
The width is set by applying a class value to a parent node.
| Class Value | Description |
|---|---|
.yui-d0 |
100%. Centered. 10px left/right margin. |
.yui-d1 |
750px. Centered. Fluid. |
.yui-d1f |
750px. Centered. Fixed. |
.yui-d2 |
950px. Centered. Fluid. |
.yui-d2f |
950ox. Centered. Fixed. |
.yui-d3 |
974px. Centered. Fluid. |
.yui-d3f |
974px. Centered. Fixed. |
Stacking
In YUI 3.x, the page width is set by choosing a class value. (In 2.x it was an ID value.) Because it's a class value you can have different and multiple widths within a page.
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.
