Grids are designed to hold cards: multiple small containers of information that serve as entry points to more detailed information. A card can fill several columns of the grid and can "flip" and expand across all columns to show more detailed information.
The desktop grid (based on 1200px width) is 12 columns of 70px each, with 15px padding at either side of the viewport and 30px gutters.
Since column widths are fluid (but padding and gutters are fixed widths):
- • 12 columns for views from 980px and up
- • 8 columns for views from 979px to 769px
- • 6 columns from 768px to 421px
- • Below 420px the grid changes to single column
Desktop container sizes for illustrative purposes: