Header
The grid system helps maintain a horizontal rhythm to the page. All major layout-ing elements should line up to the columns
The container constrains the grid system to a max width of 1140px
. On smaller screen sizes the container shrinks to take up the available space on screens. More on this later.
The grid composes 24 columns of 32px
each with gutters of 16px
. All borders and paddings are included within the widths, since border-box
is applied on the grid.
The grid layout can be easily extended by mixing different column sizes. It is also possible to nests columns within a single column.
Its possible to leave a few columns "blank". Its not necessary to use all available columns when considering a layout.
You chose to leave a gap of a few columns between elements.
In the example below is a multi column layout centered on the page,while leaving a gap of 2 col
on either side.
This layout is an example of a 3 col layout with each section taking up different numer of columns.