Kickoff’s Grid is a simple, fully responsive, grid framework that can help you build complex layouts very easily. It is based on a 12 column grid layout and column widths can be set for each media query you specify.
The grid system uses flexbox while also providing fallbacks that can be used in tandem with a feature detection script such as Modernizr in order to support older browsers. By utilising flexbox, the grid can make otherwise difficult layout tasks very simple, such as allignment and spacing. Grid column widths are also set in percentages rather than pixels, which makes the grid more flexible for responsive sites.
How it works
Here’s an overview of how the Kickoff Grid works:
- There are two major components of the grid – the grid container and grid columns.
- A grid container is specified with the
.gclass, while grid columns are set with the
- Content should be placed inside the grid columns and only grid columns can be immediate children of a grid container
- Each grid column can span up to 12 column widths of the overall grid. By default, grid columns will split the width of the grid equally between them. For example, if you have three grid columns, each will take up a third of the grid each (four column widths).
- Column widths are set in percentages, so they are responsive relative to their parent element.
- Column widths can be set by adding the appropriate class to a grid column (
.g-col). For example, if you want two grid columns spanning 6 column widths each, you would add the class
.g-span6to each grid column.
- Column widths can be specified for each breakpoint you define.
- Each grid container can contain any number of grid columns. If the combined width of the grid columns exceed 12 column widths, then they will wrap onto a new row.
- By default, grid columns are given no gutters. To add gutters to your grid, add the
.g--gutterclass to the grid container for fixed size gutters or
.g--gutter--scaledfor gutters that scale in respect to the viewport.
- Grids columns can be aligned both horizontally and vertically inside their grid container using helper classes.
- You can choose to stack your grid columns up to a certain breakpoint by using the
Let’s take a look at how all of that works with some examples.
To setup a basic grid, use the
.g-col classes to specify the grid container and grid columns.
The above example has three columns, each spanning 4 column widths each.
Each grid column can span up to 12 column widths. Here is what the grid looks like split into 12 separate columns:
|Grid behaviour||Horizontal by default.|
|# of columns||12|
20px (10px on each side of a column) when using
or calculated as a percentage of the
|Equal Height Columns||Yes|
|Flexbox Fallback||Yes, available via feature classes (i.e. Modernizr).|
The Kickoff Grid provides a number of variables that can be changed to modify certain aspects of the grid. You will find these in the
_variables.scss file of Kickoff.
These variables determine the number of grid columns, the gutter width, max grid container width and the breakpoints from which the column width classes are generated. They also control whether certain aspects of the grid are generated in the compiled CSS.
$layout-max-width: 1000; // [in pixels] $grid-column-count: 12; // Total column count $grid-gutter-width: 20; // [in pixels] $breakpoints: ( narrow: 400px, mid: 750px, wide: 1000px, huge: 1250px ); $responsive-grid-sizes : true; // Set to false if you don't want grid column classes for each breakpoint $use-legacy-grid : true; // Set to false if you don’t want flexbox fallback classes to be provided
Note that you can change both the name and the value of the breakpoints if you want to, but this will also change the grid column breakpoint classes.
So for example, by default, using the class
.g-span4--mid will make a grid column span 4 column widths above the mid breakpoint. If you were to change the name of the
mid breakpoint to
foo you would then need to apply the class
.g-span4--foo to reference this breakpoint.
By default, grid columns have no gutters applied to them. You can add two different types of gutter to your grid, using the following two classes:
N.b. For consistency, we advise using one of these gutter classes throughout your website, rather than mixing and matching.
.g--gutter class to your grid container will add a fixed width gutter to grid columns (by default this gutter is 20px).
.g--gutter--scaled class to your grid container will add a percentage width gutter that scales in respect to its container.
In the demos above, you will notice that if you narrow the browser viewport, the grid columns will not automatically stack. This is because this isn’t necessarily the required behaviour, you may want columns to keep their proportions no matter what the width of the viewport.jpg
Therefore, for better flexibility, when you want grid columns to stack, this can be specified in a couple of different ways.
If you want grid columns to stack by default, you can add the
.g--stack class to a grid container.
.g--stack class will stack grid columns until this behaviour is overriden by a column span class.
For example, if we want our columns to stack until the
mid breakpoint and to be evenly divided above this breakpoint, we can add a class of
.g-span4--mid to our three grid columns:
Alternatively, we can modify the
.g--stack class slightly to only stack our columns up until a certain breakpoint. So to make our columns stack only up to the
mid breakpoint we would use a class of
Both of these examples show two different ways of achieving the same grid layout. We’ve made our stacking classes as flexible as possible for many potential use cases.
Each column can span up to 12 grid column widths, and you can control this width across each breakpoint.
The default breakpoints are defined in the
_variables.scss file in Kickoff:
$breakpoints: ( narrow: 400px, mid: 750px, wide: 1000px, huge: 1250px );
Both the names and the values of these can be changed depending on your preferences. You can also add additional breakpoints and doing so will automatically add these to the grid classes available.
If you have been through the basic demos, you will have seen some examples of the column span classes in use already. Here’s a couple of more complex examples.
Narrow to Wider Viewports
For many designs you will want to have a different grid layout on narrow devices (such as mobile) to wider viewports (such as on a desktop).
The example below shows how you can do this. Here our three grid columns will each span 4 column widths above the
wide breakpoint. Below this breakpoint column one and two will take up 6 column widths and column three will spread across the whole width of the grid.
Combining Stacking and Column Classes
We can easily combine our stacking classes with column width classes to define fairly complex grids:
Grid columns can be aligned vertically and horizontally with respect to their grid container using the following classes.
N.b. These classes rely on flexbox CSS properties, and so gracefully degrade on older browsers that don’t support this.
Aligns grid cells to the top of the grid container.
Aligns grid cells to the bottom of the grid container.
Aligns grid cells to the right of the grid container.
Aligns grid cells in the horizontal center of the grid container.
Aligns grid cells in the vertical center of the grid container.
Aligns an individual grid cells horizontally in the grid container.
Nesting grids is made very simple. Just apply the base grid classes to an element inside your parent grid columns and use it like you would any other grid.
Equal Height Content
If you would like to make all of the child elements inside your grid columns the same height, you can use the
Holding Column Width
Sometimes, you may wish to hold the width of a column between breakpoints, usually when you are not using the whole width of the grid for your columns and want a column to maintain it’s width. A good example is a narrow navigation sidebar.
You can do this by giving a grid column the
mid is the breakpoint above which to hold the width and can be any of your defined breakpoints.
N.b. The held width will be calculated in pixels relative to the
$layout-max-width variable in
More Grid Examples
To see more examples of the grid, check out our grid demo page.