YUIのGrid CSSはすぐれもの
YUIのGrid CSSにネストのExampleが載ってるので、ネストも可能なんだと思って、1:2:1で分割しようとしたんだけど(1:3の3のほうをさらに2:1に分割)、できなかったので、自分でCSS書いてみた。
ちなみに1:1のような等分を1:2みたいな不等分に分割するコードは書いてあって、今回やったような1:2,1:3のような不等分なものをさらに分割するようなコードはない。
IEはwidthが%指定されてるとそれを基準にするんだね(個人的にはそっちのほうがわかりやすい)。
<style type="text/css"> .yui-gf .yui-gc .yui-u { float : right; width : 24.8%; *width : 33%; } .yui-gf .yui-gc .yui-u.first { float : left; width : 49.1%; *width : 64.4%; } body { text-align : left; } #wrap { width : 600px; } </style> <div id="wrap" > <div class="yui-gf"> <div class="yui-u first"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="yui-gc"> <div class="yui-u first"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="yui-u"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> </div>
他にあまり知らないというのもあるけど、YUIのなかでCSS(font,reset,grid)は、本当に素晴らしいとおもう。