All webpages at their core are built on a 12-column grid that spans across the full-width of the page.
Much like the front page of a newspaper, the use of the grid allows for multiple types of content to be displayed on a page within a structure that supports the hierarchy of content, readability, uniformity in spacing, and organization of content.
Within the structure of the 12-column grid, the webpage can be divided up into containers of various sizes that are used to present the required content for the page. The available containers are all based on dividing up our 12-columns across the page.
Fullwidth Container
Fullwidth Container: this container spans the full-width of the 12-columns available.
6X6 Container
6x6 Container: this container divides the 12-column grid into 2 available containers each 6 columns wide. 6+6=12
4x8 Container
4x8 Container: this container divides the 12-column grid into 2 available containers, one being 4 columns wide and the other being 8 columns wide: 4+8=12
This can also be set as an 8x4 container: 4+8=12
3x9 Container
3x9 Container: this container divides the 12-column grid into 2 available containers, one being 3 columns wide and the other being 9 columns wide: 3+9=12 This can also be set as a 9x3 container: 3+9=12
4X4X4 Container
4x4x4 Container: this container divides the 12-column grid into 3 available containers each 4 columns wide. 4+4+4=12
3x3x3x3 Container
3x3x3x3 Container: this container divides the 12-column grid into 4 available containers each 3 columns wide. 3+3+3+3=12
