Yahoo! UI Libraryで3カラムレイアウトとかも

Yahoo! UI Libraryで簡単に2カラムレイアウトの続き。
もうちょっとCSS Gridsの世界に踏み込むと3カラムのレイアウトとかそれ以上に複雑なレイアウトを作ることができる。
これもまたそんなに難しくはない。

グリッドでブロック要素を任意に横分割

ブロック要素の中に以下のHTMLを書くとブロック要素がさっくりと横分割される。
これを使うことによって3カラムレイアウトとか簡単にできる。

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

class名を変えることで分割割合を変えられる。

.yui-g	1/2 – 1/2
.yui-gb	1/3 – 1/3 – 1/3（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

.yui-gbを使った3分割の時は以下のような構造にする。

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

このときyui-gとかyui-uを指定した要素にmarginやpaddingを設定してしまうとレイアウトが崩れるのでそれだけ注意。

入れ子も自由自在。

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

これを応用すると複雑なレイアウトも割と簡単。
YUI素敵だ。

参考

• The Yahoo! User Interface Library (YUI)