Layout
Building layouts of all shapes and sizes thanks to a mobile-first flexbox-based twelve column system and four default responsive tiers.
Grid #
The Mount Union grid system uses a series of containers, rows, and columns to layout and align content.
Example
<div class="container-fluid text-align-center caption">
<div class="row">
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
<div class="col margin-b">
<div class="light-gray-2-bg pad-t pad-b pad-l-md-down pad-r-md-down">
<code>.col</code>
</div>
</div>
</div>
<div class="row">
<div class="col col-2-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-2-md</code>
</div>
</div>
<div class="col col-2-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-2-md</code>
</div>
</div>
<div class="col col-2-md margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-2-md</code>
</div>
</div>
<div class="col col-2-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-2-md</code>
</div>
</div>
<div class="col col-2-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-2-md</code>
</div>
</div>
<div class="col col-2-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-2-md</code>
</div>
</div>
</div>
<div class="row">
<div class="col col-3-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-3-md</code>
</div>
</div>
<div class="col col-3-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-3-md</code>
</div>
</div>
<div class="col col-3-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-3-md</code>
</div>
</div>
<div class="col col-3-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-3-md</code>
</div>
</div>
</div>
<div class="row">
<div class="col col-4-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-4-md</code>
</div>
</div>
<div class="col col-4-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-4-md</code>
</div>
</div>
<div class="col col-4-md-up margin-b">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-4-md</code>
</div>
</div>
</div>
<div class="row">
<div class="col col-6-md-up margin-b-md-down">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-6-md</code>
</div>
</div>
<div class="col col-6-md-up">
<div class="light-gray-2-bg pad-t pad-b">
<code>.col-6-md</code>
</div>
</div>
</div>
</div>