Making a responsive layout
Use our powerful mobile-first grid to build layouts of all shapes and sizes thanks to a hundred column system, Sass variables and mixins, and dozens of predefined classes.which makes user design website’s very easy and effectively
container
Container wraps your page content and helps you to align it in the center. Below is the demonstration of a simple container.
Remember when you are creating your layout that all columns must be contained inside a row and that you must add the container class to your inner divs to make them into a container.
Container
<div class="ar">
<div class="ac">
<div class="Container">
</div>
</div>
</div>
The example manifests how we can divide the layout’s space into three equal columns. Three columns each 33% wide is covering the whole window width.
Container
<div class="ar">
<div class="ac">
<div class="Container">
<div class="ac l33 m33 s33"> //content here </div>
<div class="ac l33 m33 s33"> //content here</div>
<div class="ac l33 m33 s33">//content here </div>
</div>
</div>
</div>
On large devices, you can divide the available space into four columns each 25% wide as shown below.
A Row divided into 4 columns
<div class="ar">
<div class="ac l25 m25 s25"> </div>
<div class="ac l25 m25 s25"> </div>
<div class="ac l25 m25 s25"> </div>
<div class="ac l25 m25 s25"> </div>
</div>
A row Divided with 3 Columns
<div class="ar">
<div class="ac l33 m33 s33"> </div>
<div class="ac l33 m33 s33"> </div>
<div class="ac l33 m33 s33"> </div>
</div>
A row with 4 columns on large, 2 columns on medium and 1 column on small display
<div class="ar">
<div class="ac l50 m50 s50"> </div>
<div class="ac l50 m50 s50"> </div>
</div>
A row with 4 columns on large, 2 columns on medium and 1 column on small display
<div class="ar">
<div class="ac l100 m100 s100"> </div>
</div>
Row with equal width columns
========2 columns======
<div class="ar">
<div class="ac l50 m50 s50"> </div>
<div class="ac l50 m50 s50"> </div>
</div>
========3 columns======
<div class="ar">
<div class="ac l33 m33 s33"> </div>
<div class="ac l33 m33 s33"> </div>
<div class="ac l33 m33 s33"> </div>
</div>
========4 columns======
<div class="ar">
<div class="ac l25 m25 s25"> </div>
<div class="ac l25 m25 s25"> </div>
<div class="ac l25 m25 s25"> </div>
<div class="ac l25 m25 s25"> </div>
</div>
========10 columns in one Row======
<div class="ar">
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
<div class="ac l10 m10 s10"> </div>
</div>
Row with un-equal width columns
========1 Row multiple columns =======
<div class="ar">
<div class="ac l10 m50 s100"> </div>
<div class="ac l80 m50 s100"> </div>
</div>
========1 Row multiple columns =======
<div class="ar">
<div class="ac l60 m50 s100"> </div>
<div class="ac l40 m50 s100"> </div>
</div>
========1 Row multiple columns =======
<div class="ar">
<div class="ac l12 m50 s100"> </div>
<div class="ac l34 m50 s100"> </div>
<div class="ac l54 m50 s100"> </div>
</div>
========1 Row multiple columns =======
<div class="ar">
<div class="ac l21 m50 s100"> </div>
<div class="ac l31 m50 s100"> </div>
<div class="ac l43 m50 s100"> </div>
</div>
GRID OPTIONS
Sollicitudin gravida sagittarius sulcation acinous noctuids dioxans hectic uncials. Orlando xender odio sapien orci lacus ultricies tempus Itsum omega Narming dartling auditors rotundas ligands indults cilantro.
| Small | Medium | Large | Extra large | |
|---|---|---|---|---|
| Max container width | 720px | 960px | 1140px | |
| Class prefix | l-sm- | l-md- | l-lg- | |
| # of columns | 100 | |||
| Nestable | yes |