Our grid system is based on the Bootstrap CSS library. Please read the Boostrap source documentation thoroughly. The grid system allows us to create responsive layouts by rearranging content depending on the width of the viewport (aka, the browser window.)
Each page or template must include at least one section, a semantically correct element which holds the grid structure. Semantic tags are important to good communication between the markup and the browser, essential for accessibility, especially screen readers, and also extremely useful for developers to understand, find, and modify the content within the markup. Semantic tags are:
Everything in the grid is held in a container. The container sets a maximum width of 1200px and a minimum width of 320px. It has left and right padding of 20px on mobile (< 768px) and 10px on larger devices (≥ 768px).
The blue box represents a container.
desktop_windows Desktop view with 10px left and right padding
phone_iphone Mobile view with 20px left and right padding
A column is the most basic unit of our grid. It can be any height; its width depends on the size of the device and the number of columns per row.
The purple box represents a column.
Each column has padding of 10px on the left and right sides called a gutter.
Each cyan side represents a gutter.
Columns are contained in a row. The columns get wider or narrower depending on how many there are in a row. A row can contain 1, 2, 3, 4, 6, 8, 9, or 12 columns. (The Design Language also supports a 5-column grid system, read more here. A row also has negative margins on either side, so that it spans the full width of the container.