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)は、本当に素晴らしいとおもう。