Utility Classes
To utilise grid layout first grid properties for a parent element should be enabled. The framework contains 5 grid sizes (1-5 columns) which are labelled based on their desktop appearance.
grid-1 sets a 1 column grid.
grid-2 sets a 2 column grid.
grid-3 sets a 3 column grid.
grid-4 sets a 4 column grid.
grid-5 sets a 5 column grid.
All grids have the gap property set to --gap-sml with evenly distributed columns & pre-set breakpoints by default. All attributes can be overridden with custom CSS if required.
HTML Structure
Grids should be be markedup with the following structure in addition to the utility class for optimal performance with the Framework. Ready made markup can be downloaded from the Components Library
The parent element should be given an identifying class (eg. example-grid)
Each child element should be given the class grid-item
Each child element should be given and identifying class (eg. grid-item-a)
Example HTML:
<div class="grid-3 example-grid">
<div class="grid-item grid-item-a">Example content</div>
<div class="grid-item grid-item-b">Example content</div>
<div class="grid-item grid-item-c">Example content</div>
</div>
Custom CSS
When marked up as above the default behaviour of grids can be overridden with custom CSS in the style.css stylesheet.
Grid
To target the grid you can combine the grids identifying class with the utility class selector.
Example usage:
.example-grid.grid-3 {
grid-template-columns: 1fr 2fr 1fr;
column-gap: var(--space-sml);
}
Grids default column layout and gap will be overridden.
Grid Items
To target all items within a grid you can combine the grids identifying class with the grid-item class.
Example usage:
.example-grid .grid-item {
background: var(--grey);
font-size: 2rem;
}
The background & font size would be amended for all grid items.
Specific Grid Item
To target a specific item within a grid you can combine the grids identifying class with the grid items identifying class.
Example usage:
.example-grid .grid-item-b {
background: var(--grey);
font-size: 2rem;
}
The background & font size would be amended only for grid-item-b.
Responsive
To make amendments at a specific breakpoint combine the appropriate selectors inside a media query.
Example usage:
@media only screen and (max-width: 1200px) {
.example-grid.grid-3 {
grid-template-columns: 1fr 1fr;
}
}
The grid would have 2 columns after the 1200px breakpoint.