Section Grids
Approach
Below are re-usable grids for your projects, grid class names are written to be descriptive and more natural language so a 2 column grid offset right is. then combine section grids with content grids
So an example structure would be
1-column-grid-pad
container (area: content)
2-column-grid
So an example structure would be
1-column-grid-pad
container (area: content)
2-column-grid
A 2 column content grid nested inside of a 1 column grid with padding.
Grid Auto Fit
Using auto fit class will allow you to place any content and have the grid auto populate columns based on the available space
Grid-Auto-Fit:
grid-auto-fitGrid-Auto-Fit:
grid-auto-fitGrid: 2 Column
Content Left
2-column-gridContent Left
Content Right
Grid: 2 Column Auto
Content Left
2-column-grid-autoContent Left
Content Right
Grid: 2 Column, Offset Left
Content Left
2-column-grid-offset-rightContent Left
Content Right
Grid: 2 Column, Offset Right
Content Left
2-column-grid-offset-leftContent Left
Content Right
Content Center Right
Content Center Left
Content Bottom Left
Content Bottom Right
Grid: 2 by 3
Content Left
2-by-3-gridContent Left
Content Right
Grid: 3 by 2
Content Left
3-by-3-GridContent Left
Content Right
Content Center
Content Center
Content Center
Content Center
Grid: 3 by 3
Content Left
3-by-3-GridContent Left
Content Right
Content Center
Content Center
Content Center
Content Center
Content Center
Content Center
Content Center