グリッド
基本
グリッド法則のサンプルコードです。
boxLine1
テキスト 1/1
<div class="boxSet>
<div class="boxLine1"><p>テキスト</p></div>
</div>
boxLine2
テキスト 1/2
テキスト 1/2
<div class="boxSet">
<div class="boxLine2"><p>テキスト</p></div>
<div class="boxLine2"><p>テキスト</p></div>
</div>
boxLine3
テキスト 1/3
テキスト 1/3
テキスト 1/3
<div class="boxSet">
<div class="boxLine3"><p>テキスト</p></div>
<div class="boxLine3"><p>テキスト</p></div>
<div class="boxLine3"><p>テキスト</p></div>
</div>
boxLine4
テキスト 1/4
テキスト 1/4
テキスト 1/4
テキスト 1/4
<div class="boxSet boxLine4">
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
</div>
ミックス
グリッド法則を応用したサンプルコードです。
boxLine2 - boxLine4
テキスト 1/8
テキスト 1/8
テキスト 1/8
テキスト 1/8
テキスト 1/8
テキスト 1/8
テキスト 1/8
テキスト 1/8
<div class="boxSet">
<div class="boxLine2 boxSet">
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
</div>
<div class="boxLine2 boxSet">
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4"><p>テキスト</p></div>
</div>
</div>
boxLine3 + boxLine3b
テキスト 1/3
テキスト 2/3
<div class="boxSet">
<div class="boxLine3"><p>テキスト</p></div>
<div class="boxLine3b"><p>テキスト</p></div>
</div>
boxLine4 + boxLine4b
テキスト 1/4
テキスト 3/4
<div class="boxSet">
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4b"><p>テキスト</p></div>
</div>
boxLine4 + boxLine4b
テキスト 1/8
テキスト 3/8
テキスト 1/8
テキスト 3/8
<div class="boxSet">
<div class="boxLine2 boxSet">
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4b"><p>テキスト</p></div>
</div>
<div class="boxLine2 boxSet">
<div class="boxLine4"><p>テキスト</p></div>
<div class="boxLine4b"><p>テキスト</p></div>
</div>
</div>