How to use grids

Columns - The colored blocks that make up the content width of your design

Desktop: 12 columns, 60-80px each

Tablet: 8 columns

Mobile: 4 columns

Gutter - The space in between the colored blocks, typical size 20px

Margin - The space at the left and right of the content. Sizes vary dependent on device size

Breakpoint - The point where the content will shift to a new layout to accommodate the change in device size

Fixed Grid - Using this grid, the content and text do not dynamically change, only the layout changes when scaling up/down

Fluid Grid - Using this grid, the content and text do dynamically change when scaling up/down, the layout will change when reaching a new breakpoint

Best Practices

• Design elements have to sit on some number of columns, whether 3, 4, 6
• The content within the element doesn't necessarily have to begin from the edge of a column
• Content should not sit in the gutter, but this is ok if there is a parent element that sits at the column (i.e. cards)
• You can use full bleed elements for hero images or background assets
• Side navigation doesn't have to be considered for the grid
• You can have 2 halves on a screen, and each half will have its own grid
• Design from mobile and scale up to desktop, that way you can ensure all the content can fit on the smallest screen