Kickoff comes bundled with a powerful CSS Grid Framework. To see a full list of it’s features, check out the grid documentation.
On this page we will show some further examples of grid layouts that can be achieved using the Kickoff Grid.
Standard Grid
Each .g-col element uses percentage widths, which are relative to it’s parent .g grid container. The grid’s max width can be modified by changing the $layout-max-width variable found in .
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
<div class="g g--gutter g--stack--mid">
<div class="g-col g-span3">…</div>
<div class="g-col g-span3">…</div>
<div class="g-col g-span3">…</div>
<div class="g-col g-span3">…</div>
</div>
<div class="g g--gutter g--stack--mid">
<div class="g-col g-span4">…</div>
<div class="g-col g-span4">…</div>
<div class="g-col g-span4">…</div>
</div>
<div class="g g--gutter">
<div class="g-col g-span6">…</div>
<div class="g-col g-span6">…</div>
</div>Grid Gutters
The grid can have several gutter states; No gutter (default), fixed width gutters or scaled gutters.
Default grid – No gutters
<div class="g">
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
</div>Grid with fixed width gutters
<div class="g g--gutter">
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
</div>Grid with scaled width gutters
<div class="g g--gutter--scaled">
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
<div class="g-col g-span1"></div>
</div>Centred Columns
Add a .g-alignCenter or .g-col--centered class to each column. This also means that you can only have one column per g g–stack.
<div class="g">
<div class="g-col g-span1 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span2 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span3 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span4 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span5 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span6 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span7 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span8 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span9 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span10 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span11 g-col--centered">…</div>
</div>
<div class="g">
<div class="g-col g-span12 g-col--centered">…</div>
</div>Example Grid Layouts
Here are some examples of the type of grids you can create using the Kickoff Grid.
9 / 3 column split above `mid` breakpoint, stacked at lower widths
<div class="g g--stack--mid">
<div class="g-col g-span9--mid">…</div>
<div class="g-col g-span3--mid">…</div>
</div>4 / 4 / 4 split above `mid` breakpoint, 6 / 6 / 12 at lower widths (with gutters)
<div class="g g--gutter">
<div class="g-col g-span6 g-span4--mid"><div class="g-content"> </div></div>
<div class="g-col g-span6 g-span4--mid"><div class="g-content"> </div></div>
<div class="g-col g-span12 g-span4--mid"><div class="g-content"> </div></div>
</div>