YUI Grids CSS　読んでみた２　ネストしたグリッド

http://developer.yahoo.com/yui/grids/をちょろっと読んでみた　その２
バージョンは2.6.0

Using Nesting Grids

グリッドを入れ子にする

（超適当）
グリッドは入れ子にできる。メインのブロックをさらに２つのブロックに分けたりとか

The Basic Idea

基本的な考え方

グリッドはユニットを持つ
グリッドはclass="yui-g"。gはグリッドの意味
ユニットはclass="yui-u"。uはユニットの意味

ブロックを2つに分ける例。

...
<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-u first"></div>
         <div class="yui-u"></div>
      </div>
   </div>
</div>
...

Note: Indicating :first-child
class="yui-u first"のfirstはCSSの擬似クラス:first-childをサポートしてないブラウザが
あるから付けとけってこと？
（あんまりよくわからん）

Deeper Nesting

多重の入れ子にする

こんな感じでできる。

...
<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-g first">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
         <div class="yui-g">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
      </div>
   </div>
</div>
...

大事なこと

yui-gの子にはyui-gにする。yui-uの子にyui-gはだめ
firstをそれぞれ必ずつけること

Using Special Nesting Grids

普通のグリッドはブロックを半分に分けるけど、
3つに分けたり、半分づつでなくて66%と33%に分けたりしたいときは
特別なグリッドを使う。

firstグリッドが2/3で残りが1/3のときはこんな感じ

...
<div id="yui-main">
   <div class="yui-b">
      <div class="yui-gc"> <!-- the "special grid" -->
         <div class="yui-u first"></div>
         <div class="yui-u"></div>
      </div>
   </div>
</div>
...

利用できるグリッドのクラス

クラス	分割の割合
.yui-g	1/2-1/2
.yui-gb	1/3-1/3-1/3
.yui-gc	2/3-1/3
.yui-gd	1/3-2/3
.yui-ge	3/4-1/4
.yui-gf	1/4-3/4