logo Apollo-UI

Grid

A grid layout helps in placing components easily and providing responsiveness to overall structure of the webpage.


Grid-2-column

To make a two columns grid, wrap a container in grid and grid_2_col classes. Add two containers, with aside__left and aside__right classes.

Copied!
Banner_1 Banner_2
<div class="grid grid_2_col">
 <img src="..."
    alt="" class="aside__left" />
 <img src="..."
    alt="" class="aside__right" />
</div>
                  

Grid-3-column

To make a three columns grid, wrap a container in grid and grid_3_col classes. Add two containers, with aside__left,  main and aside__right classes.

Copied!
Banner_1 Banner_2 Banner_3
<div class="grid grid_2_col">
 <img src="..."
    alt="" class="aside__left" />
 <img src="..."
    alt="" class="main" />
 <img src="..."
    alt="" class="aside__right" />
</div>