CGU’s grid system is built with the Neat Mixin Library.
.u-span-{columns}
Use the u-span-{$i} class (where {$i} is an integer 3 through 9) to make an element span $i columns.
<div class="h4 u-color-red">Columns are responsive. Resize your browser to see.</div>
<div id="span-example">
<div class="u-clear">
<div class="u-span-9">.u-span-9</div>
<div class="u-span-3">.u-span-3</div>
</div>
<div class="u-clear">
<div class="u-span-8">.u-span-8</div>
<div class="u-span-4">.u-span-8</div>
</div>
<div class="u-clear">
<div class="u-span-7">.u-span-7</div>
<div class="u-span-5">.u-span-5</div>
</div>
<div class="u-clear">
<div class="u-span-6">.u-span-6</div>
<div class="u-span-6">.u-span-6</div>
</div>
<div class="u-clear">
<div class="u-span-4">.u-span-4</div>
<div class="u-span-4">.u-span-4</div>
<div class="u-span-4">.u-span-4</div>
</div>
<div class="u-clear">
<div class="u-span-3">.u-span-3</div>
<div class="u-span-3">.u-span-3</div>
<div class="u-span-3">.u-span-3</div>
<div class="u-span-3">.u-span-3</div>
</div>
</div>
<style>
#span-example div div {
background-color: #eee;
border: 1px solid #af1e27;
padding: 0.5em 1em;
margin-top: 1.5rem;
}
</style>