One
Grid
Build layouts of all shapes and sizes.
| Class | Function |
| .container | Controls the overall width |
| .grid | Distributes the cells, sets gaps |
| .cell | Optional: Sets the width, contains the content |
Basic definition
The flexbox-based grid consists of three elements: The parent .container controlling the overall width, the .grid to distribute the cells and set gaps, the .cell which contains the actual content.
Note: The css class .auto ensures that all cells occupy exactly the space they need.
Two
Three
Four
Sizing via parent container
With this method, the individual cells are distributed evenly via the parent .grid. You can easily control the responsive behaviour by adding semantic classes. E.g. full, half@sm, thirds@md.
One
Two
Three
Sizing via cells
This is the more classical approach, where the size definitions take place directly in the respective .cell. This method allows individual width specifications. E.g. 12, 7@lg
I'm 12 cells wide on mobile and 7 cells wide on large
I'm 12 cells wide on mobile and 5 cells wide on large
Row gaps
By adding .row-gaps to the parent .grid, each cell will get some vertical space.
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Custom gaps
Define your custom gaps in _settings.scss and add the equivalent css class (e.g. .gaps-small) to the .grid.
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
No gaps
Remove all gaps by adding .no-gaps to the parent .grid.
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Full-width grid
By adding .full-width to the .container the grid will fill up the entire space.
Box 1
Box 2
Box 3
Box 4
Full-width and seamless
By adding .seamless to the full-width .container all gaps will be removed.
Box 1
Box 2
Box 3
Box 4
Customization
You can customize the grid in _settings.scss.