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: 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