CSS Grid - うなの日記

CSS Gridを使うと、単純な横方向分割レイアウトが簡単に実現できます。

実行準備

次のCSSをインポートします。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/grids/grids-min.css">

レイアウト

基本的な使い方は次の通りです。

親要素のdivに「yui-g*」を設定。
- 分割の方式はここで設定するクラスで決まります。
- 利用可能な値の一覧はこのあたりにあります。
子要素となるdivに「yui-u」を設定。
最初の「yui-u」には「first」も設定します。

<p>■50% で2分割
<div class="yui-g">
   <div class="yui-u first left">左</div>
   <div class="yui-u right">右</div>
</div>
</p>

<p>■33% ずつ 3分割
<div class="yui-gb">
   <div class="yui-u first left">左</div>
   <div class="yui-u right">右</div>
   <div class="yui-u center">真ん中</div> <!-- 真ん中が下。微妙 -->
</div>
　　</p>

<p>■66% / 33% で2分割
<div class="yui-gc">
   <div class="yui-u first left">左</div>
   <div class="yui-u right">右</div>
</div>
</p>

<p>■33% / 66% で2分割
<div class="yui-gd">
   <div class="yui-u first left">左</div>
   <div class="yui-u right">右</div>
</div>
</p>


<p>■ネストもOK
<div class="yui-g">
   <div class="yui-gd first">
     <div class="yui-u first left">左-左</div>
     <div class="yui-u right">左-右</div>
   </div>
   <div class="yui-gb">
     <div class="yui-u first left">右-左</div>
     <div class="yui-u right">右-右</div>
     <div class="yui-u center">右-真ん中</div>
   </div>
</div>
</p>

確認はこちらから

気になる

子要素間に微妙にスペースができるんですけど。
しかも幅が不定(親要素の横幅に依存)だし。ありえへん。