The Grid System

The Grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

The Grid System has four displaySize Types:

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

The Types above can be combined to create more dynamic and flexible layouts.

Columns are assigned Rules for DisplaySize Types

An example of this is telling a column that on a small(sm) device the column should take 12/12 of the available space while on a desktop it only needs to take 3/12 of the space;

Grid System Rules

• Rows must be placed within a Responsive Layout
• Rows will always fill with 100% width what you put them in
• Use rows to create horizontal groups of columns
• A column can only hold one component
• Content should be placed within columns, and only columns may be immediate children of rows
• Columns are created by specifying the number of 12 available columns you wish to span. For example, Three equal columns would use three Columns set to a width of 4; 4+4+4 = 12;