Code Club Style Guide

Grid System

How to Grid!

Our grid system uses CSS Flexbox to control the layout of the different sections of content and elements your sites will be built from.

The grid is built to contain up to 12 columns, and responds to differing viewport widths by adjusting the widths of columns to keep things feeling comfortable and legible.

Take a look at a demo of the grid system

A Basic Grid

In its purest form, a grid looks like this:

<div class="c-grid">
<div class="c-col c-col--12">

That will create a grid row (.c-grid) with one column (.c-col), that spans all 12 columns (.c-col--12)

Other column widths are specified the same way:

<div class="c-grid">
<div class="c-col c-col--1"> ... </div>
<div class="c-col c-col--2"> ... </div>
<div class="c-col c-col--3"> ... </div>
<div class="c-col c-col--4"> ... </div>
<div class="c-col c-col--5"> ... </div>
<div class="c-col c-col--6"> ... </div>
<div class="c-col c-col--7"> ... </div>
<div class="c-col c-col--8"> ... </div>
<div class="c-col c-col--9"> ... </div>
<div class="c-col c-col--10"> ... </div>
<div class="c-col c-col--11"> ... </div>
<div class="c-col c-col--12"> ... </div>

Grid columns can be combined in any combination to create your layouts, just remember that a column will always appear on the same row as the previous column if there is space for it to fit.

If you find that you need to start a new row, then close your current .c-grid and open a new one.

Grid Column Alignment

Groups of columns can be aligned vertically or horizontally. Examples of the options available can be found on the grid demo page - view the page source for the HTML you'll need to achieve these results.