-
Notifications
You must be signed in to change notification settings - Fork 7
Mixins
Grid mixins are a collection of functions to allow you to create custom grids or layouts. These mixins are used to create the ultility grid and layout classes. Please check these before creating a custom grid.
The grid mixin is used to initiate a grid. You must use @include grid; to create a grid or layout. This should be added to the grid container.
Gutters can be added to the grid container on the X & Y axis by using @include grid-gutter-x; or @include grid-gutter-y;. By default it will use the global gutter variables set in the vars file. If you wish for it to be different you can pass through a pixel, em, rem or percentage value by using @include grid-gutter-x(20px); or @include grid-gutter-y(5em);.
Grid columns adds a specific width to a direct descendant of the grid container. Unlike the other examples, this should be applied to a child element using @include grid-col(25%);. If you’re using this, it is likely you’ll need to apply @include grid-col(); to every direct descendant of the grid.
By default grids will left align. This is important for grids where items are equally distributed, such as a product listing. If there is an odd number of items you want the remainder to sit on the left. If you wish to centre them instead you can use @include grid-center;.
If you wish to justify the content in the grid you can use @include grid-justify;. This is useful to distribute items evenly within a flex container.
If you wish to reserve a grid layout you can use @include grid-reverse;. This could be useful for quickly flipping layouts around.
The advantage of using mixins is you can include them inside any media query. This means we can completely customise how a grid appears at each breakpoint.
The grid utility provides a selection of classes to create predefined, equally divided layouts. They use the mixin grid. You can create grid layouts from 2 to 12 columns.
There is a separate class to apply a gutter .g-gutter. The gutter is set as a global variable inside the variables file. Changing this global variable will effect both the grid and layout utility. You can reverse a grid by using .g-reverse.