Grid System
Flexbox
The Flexible Box Layout Module (flexbox), makes it easier to design flexible responsive layout structure without using float or positioning. Using flexbox we are able to build a lightweight, percentage based, grid system that suits all of our needs.
By default the grid will add a 2rem (32px) gutter around the grid items. This helps estabilsh a more consistent vertial and horizontal rhythm. This can be overridden on the column to help when nesting grids (see "Nested Grid Example").
The nature of flexbox is flexible. For that reason the proportion of the columns might differ depending on the amount of columns in the container and the size of the viewport. Each .go-column--xx item will attempt to constrain to the designated xx percentage before filling the remaining space for that row.
Basic Examples
5 Column (~20%)
The .go-column--20 will create a column that starts at 20% of the width of the container before filling the remaining space. It can be used to create a basic 5 column grid.
On devices that are tablet sized and smaller the 5 columns created with the .go-column--20 class will stretch to being 2 columns per row. Giving it more space on smaller devices.
<section class="go-container">
<div class="go-column go-column--20">1 of 5</div>
<div class="go-column go-column--20">2 of 5</div>
<div class="go-column go-column--20">3 of 5</div>
<div class="go-column go-column--20">4 of 5</div>
<div class="go-column go-column--20">5 of 5</div>
</section>
4 Column (~25%)
The .go-column--25 will create a column that starts at 25% of the width of the container before filling the remaining space. It can be used to create a basic 4 column grid.
On devices that are tablet sized and smaller the 4 columns created with the .go-column--25 class will stretch to being 2 columns per row. Giving it more space on smaller devices.
<section class="go-container">
<div class="go-column go-column--25">1 of 4</div>
<div class="go-column go-column--25">2 of 4</div>
<div class="go-column go-column--25">3 of 4</div>
<div class="go-column go-column--25">4 of 4</div>
</section>
3 Column (~33%)
The .go-column--33 will create a column that starts at 33% of the width of the container before filling the remaining space. It can be used to create a basic 3 column grid.
On devices that are tablet sized and smaller the 3 columns created with the .go-column--33 class will stretch to being 1 column per row. Giving it more space on smaller devices.
<section class="go-container">
<div class="go-column go-column--33">1 of 3</div>
<div class="go-column go-column--33">2 of 3</div>
<div class="go-column go-column--33">3 of 3</div>
</section>
2 Column (~50%)
The .go-column--50 will create a column that starts at 50% of the width of the container before filling the remaining space. It can be used to create a basic 2 column grid.
On devices that are tablet sized and smaller the 2 columns created with the .go-column--50 class will stretch to being 1 column per row. Giving it more space on smaller devices.
<section class="go-container">
<div class="go-column go-column--50">1 of 2</div>
<div class="go-column go-column--50">2 of 2</div>
</section>
Offset Examples
~66% Column
The .go-column--66 will create a column that starts at 66% of the width of the container before filling the remaining space. It can be used to create an offset 2 column grid.
On devices that are tablet sized and smaller the 66% column created with the .go-column--66 class will stretch to being 1 column per row. Giving it more space on smaller devices.
<section class="go-container">
<div class="go-column go-column--33">33.33333%</div>
<div class="go-column go-column--66">66.66667%</div>
</section>
~75% Column
The .go-column--75 will create a column that starts at 75% of the width of the container before filling the remaining space. It can be used to create an offset 2 column grid.
On devices that are tablet sized and smaller the 2 columns created with the .go-column--75 class will stretch to being 1 column per row. Giving it more space on smaller devices.
<section class="go-container">
<div class="go-column go-column--75">75%</div>
<div class="go-column go-column--25">25%</div>
</section>
Advanced Example
Mix Columns
Below is an example of a mixed column grid. All of the columns can be contained within a single .go-container element.
<section class="go-container">
<div class="go-column go-column--25">25%</div>
<div class="go-column go-column--25">25%</div>
<div class="go-column go-column--50">50%</div>
<div class="go-column go-column--66">66%</div>
<div class="go-column go-column--33">33%</div>
<div class="go-column go-column--100">100%</div>
</section>
Nested Grid Example
Below is an example of a grid nested inside of another grid. All of the columns can be contained within a single .go-container element. Note the use of the .go-column--no-padding modifier class to remove the padding added by default. This ensures that the nested grid is flush with the bottom of the parent grid.
75%
<section class="go-container example-grid">
<div class="go-column go-column--25">25%</div>
<div class="go-column go-column--75 go-column--no-padding">
<p class="go-body-copy">75%</p>
<div class="go-container">
<div class="go-column go-column--50">50%</div>
<div class="go-column go-column--50">50%</div>
</div>
</div>
</section>
Collapsable Column
In some cases, it may be necessary for columns in the grid to collapse to the size of its content. A modifier class can be added to the column to acheive this:
<section class="go-container">
<div class="go-column">Column 1</div>
<div class="go-column go-column--collapse">Column 2</div>
</section>
Center Alignment
In some cases, it may be necessary to align items in a container vertically centered. A modifier class can be added to acheive this:
Column 1, Row 1
Column 1, Row 2
Column 1, Row 3
<section class="go-container go-container--align-center">
<div class="go-column go-column--50">Column 1</div>
<div class="go-column go-column--50">Column 2</div>
</section>
Forms Container
For all forms we use a slightly condensed grid system. For this you'll need to add the go-container--form modifier class to any go-container element that contains form elements with go-columns.
If there are nested go-container elements, you'll need to add go-container--form to those as well.
<form
[formGroup]="form"
class="go-container go-container--form">
<div class="go-column column--100 go-column--no-padding">
<div class="go-container go-container--form">
<go-input
class="go-column go-column--50"
label="First Name"
[control]="form.get('firstName')">
</go-input>
<go-input
class="go-column go-column--50"
label="Last Name"
[control]="form.get('lastName')">
</go-input>
</div>
</div>
<go-input
class="go-column go-column--100"
label="Email"
[control]="form.get('email')">
</go-input>
<div class="go-column go-column--100 go-column--no-padding">
<go-button>Submit</go-button>
</div>
</form>
Container Reset
Problem:
If we apply .go-container to an element whose parent does not provide any left or right padding, the negative margin of the .go-container will cause any .go-columns within it to lack the correct amount of left and right spacing.
For example, if we are using a .go-container within a .go-off-canvas, since the .go-off-canvas itself does not apply and left or right padding, and since the negative margin of the .go-container will cancel out the left and right padding of any .go-column it contains, any .go-column within our .go-container will fail to have the proper left and right spacing.
Solution:
We can solve this problem by also applying the .go-container--reset class to the element with the .go-container class, which will add left and right padding to offset the negative margin from .go-container, thus ensuring that any contained .go-column will have the correct left and right spacing.
Example:
<form class="go-form go-form--dark">
<div class="go-container go-container--form go-container--reset">
<div class="go-column go-column--50">
<label for="first-name-input" class="go-form__label">First Name</label>
<input class="go-form__input" id="first-name-input" placeholder="Jonny" type="text">
</div>
<!-- ... -->
</div>
</form>