Things to think about with a grid system for layout

When developing a frontend layout template, a popular solution is using a grid system. Grids were initially developed to aid in designing print layouts, but quickly caught on as a tool to help with thinking and communicating about web design, especially for responsive web design.

A grid system is generally composed of Columns, Gutters, and Margins. Columns are the vertical dividers that page components are aligned on, gutters are the spaces between columns, and margins are the space to the left and right of your primary content. Material.io does a fantastic job of going into further detail as to what these mean.

Goals of a grid:

1. Reduce the complexity that goes into handling how a page reacts for different responsive sizes
2. Enforce consistency between pages
3. Align components on the page
4. Give a common language between designer and developer for layout intent (and reduce pixel pushing)

There are many ways to technically implement a grid, but before you implement it your design and development teams should work together to align on some guidelines for the grid system.

Questions to answer

• (Design) Should margins be built into the frame?
  • Why you might say yes
  • It enforces the same margins everywhere
  • Why you might say no (and what to take into account)
  • Not including padding allows for more flexibility, but you'll need to think through how to make your different areas line up
  • Pros: less to think about
  • Cons: less flexibility
• (Design) Should you allow nested grids?
  • Pros: flexibility
  • Cons:
    • if padding is included, you have to account for double Padding
      • Either collapse duplicate padding or have double padding
    • You need to think about how wide columns can be
• (Design) What breakpoints should you use?
  • Is there a maximum width?
  • What are the screen size considerations (wide screens! (21:9))
  • Phone and mobile device considerations
• (Design) What # of columns?
• 12 is common because you can easily divide it into halves, thirds, or quarters
• If you don't want to allow more nesting, 24 columns can give more flexibility
• (Design) Are side navs (if they exist) on the grid or independent of the grid?
• (Design) When and how can you break out of the grid? Should you be able to?
• (Engineering) How do you want to implement the grid?
  • Off the shelf system
    • Pros: includes documentation
    • Cons: often not hard to roll your own, and rolling your own can give flexibility
  • Home grown
    • Inline block
    • Float
    • Flexbox
      • Bootstrap grid now uses flexbox
      • Allows auto-resizing
    • Javascript
    • CSS Calc
      • Material design uses CSS Calc

Examples of how these could be answered to build a design system:

Option 1 - Highly opinionated

• Padding: 10px between each column
• Nested grids? No
• What breakpoints: 3 breakpoints, X, Y, Z
• # of columns: 12
• Side navs: 150px wide on medium and large breakpoints

This is the most reliable and simple to use, but it is not flexible, and you'll end up with many discussions when the design doesn't fit perfectly on the grid, and the design will have to shift

Option 2 - Highly flexible

• Padding: No padding on the grid
• Nested grids? Yes
• What breakpoints: 3 breakpoints, X, Y, Z
• # of columns: 12
• Side navs: Side nav on the grid

This option is easy to use, but you'll also run into a lot of edge cases when implementing where something will be too small on the edge of the breakpoint, and you have to tweak back and forth to determine how many columns wide something should be

Option 3 - Middle ground

• Padding: 10px between each column
• Nested grids? No
• What breakpoints: 3 breakpoints, X, Y, Z
• # of columns: 24
• Side navs: Side nav, 150px wide on medium and large breakpoints

References:

• https://material.io/design/layout/responsive-layout-grid.html#breakpoints