.clear .start or .end classes necessary.The .g component simply adds negative horizontal margins so that we don’t need any .last or .first .g__col classes. Use an alternative wrapper class to set max-width.
Gutters are fixed width, but can change depending on the breakpoint. In this example the gutter is increased to 25px at Breakpoint D and above.
By default a .g__col is 100% of the width of .g. These columns have many modifiers available for sizing the various units within, whilst the width of each is dependent on the number of columns set and the width of the container itself.
Columns can be aligned to the right with the .g__align--right class. Due to the way that floats are handled by CSS, sometimes we’ll need to add extra .g objects in order to clear columns properly.
Columns can be centered with the .g__col--center class. It’s also possible to center columns to the left at medium breakpoints, then right or left align them at larger breakpoints.
.g__col .g__col--8 .g__col--center
.g__col .g__col--10 .g__col--center
Depending on the number of breakpoints in the grid system, you can have any number of combinations of the grid, for instance if a design component needed to be small width at mobile, wide at tablet and then small again at desktop. First you’d need to specify the class .g__col--8--medium followed by .g__col--6--large. This system allows for an enormous number of design decisions to be made between these breakpoints.
.g__col .g__col--10 .g__col--9--small .g__col--8--medium .g__col--7--large .g__col--6--largest
Columns can be pushed either left or right of the grid container. Since all columns float left by default, the .g__align--right class must be added in order to float columns to the right.
.g__push--left-1
.g__align--right .g__push--right-1
These classes can be modified depending on the viewport, for instance we can push a column to the left on mobile and then to the right on another breakpoint if the design requires it. First we set the width of the column (.g__col--10), followed by the direction (.g__align--left) and how much to push the column by (.g__push--left-1).
.g__col .g__col--10 .g__push--left-2 .g__col--5--small .g__push--right-1--small .g__align--right--small .g__col--8--medium .g__push--left-1--medium .g__align--left--medium .g__col--5--large .g__push--right-1--large .g__align--right--large
Pushing in both directions is possible with the .g__push--both modifier class. This will always override any of the set widths in the .g__col classes because in order for this to work the module must be more than 100% wide.
If a module is not inside the grid then it will naturally be 100% of the viewport. If possible, all modules should automatically fill up the parent element by default. This way we’ll know precisely how to modify the width of the element – by changing the grid classes in the markup.