Example 1:
Box A
Box B
Vertically AlignBox C
Box D
Box E
Box F
Code:
<ul class="vgri vl-3 vm-2 vs-1 vali-v">
<li>
<p>Box A</p>
</li>
<li>
<p>Box B</p>
</li>
<li>
<p>Box C</p>
</li>
<li>
<p>Box D</p>
</li>
<li>
<p>Box E</p>
</li>
<li>
<p>Box F</p>
</li>
</ul>
Example 1:
Large 4 | Medium 4
Large 4 | Medium 4
Large 4 | Medium 4
Code:
<div class="vrow">
<div class="vcol vl-4 vm-4">
<p>Large 4 | Medium 4</p>
</div>
<div class="vcol vl-4 vm-4">
<p>Large 4 | Medium 4</p>
</div>
<div class="vcol vl-4 vm-4">
<p>Large 4 | Medium 4</p>
</div>
</div>Example 2:
Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Large 2
Medium 6Code:
<div class="vrow">
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
<div class="vcol vl-2 vm-6">
<p>Large 2 | Medium 6</p>
</div>
</div>Example 3:
A
B
Code:
<div class="vrow">
<div class="vcol vl-7 vm-7 vs-6 vl-r5 vm-r5 vs-r6">
<p>A</p>
</div>
<div class="vcol vl-5 vm-5 vs-6 vl-l7 vm-l7 vs-l6">
<p>B</p>
</div>
</div>
