Grids

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs.

Two Column Grid

The grid layout shown below can be triggered by using grid class and then adding col2x2.The blocks shown below are for representation purpose

Two Column Grid

Implementation

One Grid. Two Grid.Three Grid. Four Grid.


<!-- Grid 2x2 -->
<div class="grid col2x2">
<li class="grid--item"></li>
<li class="grid--item"></li>
<li class="grid--item"></li>
<li class="grid--item"></li>
</div>

Three Column Grid

The grid layout shown below can be triggered by using grid class and then adding col3x3.The blocks shown below are for representation purpose

Three Column Grid

Implementation

One Grid. Two Grid.Three Grid.

  
<!-- Grid 3x3 -->
<div class="grid col3x3">
<li class="grid--item center-children"></li>
<li class="grid--item"></li>
<li class="grid--item"></li>
<li class="grid--item"></li>
<li class="grid--item"></li>
<li class="grid--item"></li>
</div>