# Grid
The grid is a fundamental tool in making Front-End UI builds match design specifications. When working in design software, designers use a grid specification as a guide for where and how elements should be positioned on the page.
To see a visualization of the Grid in Figma, choose View > Layout Grids. In the Design System library we have a toolset that can replicate the grid perfectly. It is made up of 3 elements, containers, rows and columns.
# The Grid container
The grid is managing a number of tasks at any given window size. A lot of the heavy lifting is done by the outermost element: the grid container. This can be included by applying the class goco-l-grid-container to a <div>. The role of this element is to apply margins on either side of the grid, and control the width of itself and containing elements. Depending on what you are building this might be all you need. When building a layout, you should only need one grid width container as the outermost element, outermost meaning no parent element with width, max-width or margins applied, as the grid container needs to be able to fill 100% of the page width at all screens widths. You should not nest them within one another, although you can include as many on a page as needed.
NOTE
In the example below we have provided example grid columns to illustrate how these elements interact with one another, and to demonstrate how using the Grid Width Container will help you when trying to replicate designs.
<div class="goco-l-grid-container">
<!-- Content goes here -->
</div>
# Grid Rows and Columns
The grid specification is made up of 12 equal columns, that scale in width depending on the parent container. The columns have a specific gutter size on either side depending on the window size, this is handled by the grid. In order to make use of the grid, you need to nest columns inside of a row. The row element uses flexbox to layout the columns. By default, it will lay the columns from left to right across the page in the order that they are included, but there are flex utilities available to manipulate this behavior. A new row represents a new separate set of columns, therefor it will force elements onto a new line.
<div class="goco-l-grid-container">
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-1">1</div>
<div class="goco-l-grid-col-1">2</div>
<div class="goco-l-grid-col-1">3</div>
<div class="goco-l-grid-col-1">4</div>
<div class="goco-l-grid-col-1">5</div>
<div class="goco-l-grid-col-1">6</div>
<div class="goco-l-grid-col-1">7</div>
<div class="goco-l-grid-col-1">8</div>
<div class="goco-l-grid-col-1">9</div>
<div class="goco-l-grid-col-1">10</div>
<div class="goco-l-grid-col-1">11</div>
<div class="goco-l-grid-col-1">12</div>
</div>
</div>
# Why does the Grid row above not align to the edge like the rest?
This is due to the approach used to achieve the gutters between each column. There is a minus margin applied to the left and right side of the row, which stretches the element outside of it's parent container. Then each column inside of it has equal padding left and right to create the gap you see between columns, this padding on each column will also re-align content to the edge of the parent container (in this case the grid width container) as it should. This is really just an implementation detail, you shouldn't need to think about it while using the grid tools. The only thing to remember is to always put at least one column inside of a row to align content properly, unless you have a special case.
# Column width
When defining a column you can specify it's width, by applying any number between 1 and 12. So goco-l-grid-col-1 will be 1 column wide and goco-l-grid-col-2 will be 2 columns wide and so on.
<div class="goco-l-grid-container">
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-12">1</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-1">1</div>
<div class="goco-l-grid-col-11">11</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-2">2</div>
<div class="goco-l-grid-col-10">10</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-3">3</div>
<div class="goco-l-grid-col-9">9</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-4">4</div>
<div class="goco-l-grid-col-8">8</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-5">5</div>
<div class="goco-l-grid-col-7">7</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-6">6</div>
<div class="goco-l-grid-col-6">6</div>
</div>
</div>
# Breakpoints
You can also specify different widths depending on screen size, you just need to add a breakpoint like so {breakpoint}:goco-l-grid-col-{number of columns}
<div class="goco-l-grid-container">
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-12 small:goco-l-grid-col-3 medium:goco-l-grid-col-2 large:goco-l-grid-col-1">
<!-- Column content -->
</div>
<div class="goco-l-grid-col-6 small:goco-l-grid-col-6 medium:goco-l-grid-col-8 large:goco-l-grid-col-10">
<!-- Column content -->
</div>
<div class="goco-l-grid-col-6 small:goco-l-grid-col-3 medium:goco-l-grid-col-2 large:goco-l-grid-col-1">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-12 small:goco-l-grid-col-3 medium:goco-l-grid-col-2 large:goco-l-grid-col-1">
<!-- Column content -->
</div>
<div class="goco-l-grid-col-12 small:goco-l-grid-col-9 medium:goco-l-grid-col-10 large:goco-l-grid-col-11">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-10 small:goco-l-grid-col-6 medium:goco-l-grid-col-8 large:goco-l-grid-col-10">
<!-- Column content -->
</div>
<div class="goco-l-grid-col-2 small:goco-l-grid-col-6 medium:goco-l-grid-col-4 large:goco-l-grid-col-2">
<!-- Column content -->
</div>
</div>
</div>
# Offsets
To offset a column you can use the goco-l-grid-col-offset-{number of columns} class and apply any number between 1 and 11 to specify how many columns across this should be. Much the same as column widths, breakpoints can be specified. For example, goco-l-grid-col-offset-1 medium:goco-l-grid-offset-6 will offset the column by 1 and from the medium breakpoint and up, it will be offset by 6.
<div class="goco-l-grid-container">
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-1 goco-l-grid-col-offset-11">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-2 goco-l-grid-col-offset-10">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-3 goco-l-grid-col-offset-9">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-4 goco-l-grid-col-offset-8">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-5 goco-l-grid-col-offset-7">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-6 goco-l-grid-col-offset-6">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-7 goco-l-grid-col-offset-5">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-8 goco-l-grid-col-offset-4">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-9 goco-l-grid-col-offset-3">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-10 goco-l-grid-col-offset-2">
<!-- Column content -->
</div>
</div>
<div class="goco-l-grid-row">
<div class="goco-l-grid-col-11 goco-l-grid-col-offset-1">
<!-- Column content -->
</div>
</div>
</div>
← Breakpoints Button →