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: 1 Column, Padding
Content Left
1-column-grid-padContent Left
Grid: 1 Column, Padding, No Bottom
Content Left
1-column-grid-pad-no-bottomContent Left
Grid: 1 Column, Padding, No Top
Content Left
1-column-grid-pad-no-topContent Left
Grid: 1 Column, Padding
Content Left
1-by-2-grid-padContent Left
Content 2
Grid: 2 Column, Padding
Content Left
2-column-grid-padContent Left
Content Right
Grid: 2 Column, Padding
Content Left
2-column-grid-padContent Left
Content Right
Grid: 2 Column, Padding
Content Left
2-column-grid-padContent Left
Content Right
Grid: 2 Column, Padding Double Center
Content Left
2-column-double-pad-gridContent Left
Content Right
Grid: 2 Column, Padding, Offset Left
Content Left
2-column-grid-pad-offset-leftContent Left
Content Right
Grid: 2 Column, Offset Right
Content Left
2-column-grid-pad-offset-rightContent Left
Content Right
Section: 2 Column Grid. No Padding Right
Content Left
section-2-column-grid-no-pad-rightContent Left
Content Right
Section: 2 Column Grid. No Padding Left
Content Left
section-2-column-grid-no-pad-leftContent Left
Content Right