Yahoo! UI Library Grids CSS

ヘッダー部分

yui-t6でのレイアウトになります。yui-t1 | yui-t2 | yui-t3 | yui-t4 | yui-t5 | yui-t7 |

<div id="yui-main"><div class="yui-b"></div></div>

サンプル

サイドコンテンツ
<div class="yui-b"></div>

yui-g:2分割等幅
<div class="yui-u first"></div>

サンプル

<div class="yui-u"></div>

yui-gb:3分割等幅
<div class="yui-u first"></div>

サンプル

yui-gb:3分割等幅
<div class="yui-u"></div>

yui-gb:3分割等幅
<div class="yui-u"></div>

yui-gc:2分割left:2/3、right:1/3幅幅
<div class="yui-u first"></div>

サンプル

yui-gc:2分割left:2/3、right:1/3幅幅
<div class="yui-u"></div>

yui-gd:2分割left:1/3、right:2/3幅幅
<div class="yui-u first"></div>

サンプル

yui-gd:2分割left:1/3、right:2/3幅幅
<div class="yui-u"></div>

yui-g:2分割等幅
<div class="yui-g first"></div>

yui-g:4分割等幅
<div class="yui-u first"></div>

サンプル

yui-g:4分割等幅
<div class="yui-u"></div>

yui-g:2分割等幅
<div class="yui-g"></div>

yui-g:4分割等幅
<div class="yui-u first"></div>

yui-g:4分割等幅
<div class="yui-u"></div>

yui-g:2分割等幅
<div class="yui-g first"></div>

サンプル

yui-g:2分割等幅
<div class="yui-g"></div>

yui-g:4分割等幅
<div class="yui-u first"></div>

yui-g:4分割等幅
<div class="yui-u"></div>

yui-g:2分割等幅
<div class="yui-g first"></div>

サンプル

yui-g:4分割等幅
<div class="yui-u first"></div>

yui-g:4分割等幅
<div class="yui-u"></div>

yui-g:2分割等幅
<div class="yui-u"></div>

yui-ge:2分割left:3/4、right:1/4幅
<div class="yui-u first"></div>

サンプル

yui-ge:2分割left:3/4、right:1/4幅
<div class="yui-u"></div>

yui-gf:2分割left:1/4、right:3/4幅
<div class="yui-u first"></div>

サンプル

yui-gf:2分割left:1/4、right:3/4幅
<div class="yui-u"></div>

フッターコンテンツ