Top Things I Learned

8 pt is rule of thumb when creating designs for scaling
you can have creative flexibility when building design elements, but the start and end of the parent container should be aligned with the columns correctly, so i.e the responsive structure enables content on the right to pass down under correctly when the screen width decreases
- this means that the content inside each parent container can vary in size
to fit columns correctly, parent container should start on left of first column, and end at right of last column, never bleed into gutters
columns are typically 60-80 px, 8 pt grid article guy prefers 72px
gutters is commonly 20px, tho 8pt grid article guy utilizes 24 px
side margins are typically 20-30px, should increase in size as you go up in device width, the value you set will be the minimum side margin that the smallest device width will allow
make sure content spans the entire width of the columns, do not use columns on the side as padding
3 main types of responsive grids
- Fixed
  - content is static while moving from one breakpoint to the next
- Fluid
  - content is fluid while moving from one breakpoint to the next
- Hybrid
  - you can have both, i.e fixed for desktop but fluid for mobile, to accommodate for wide variety of mobile phone sizes
should have global UI elements around responsive grids that aren't fluid, responsive grid system decreases column count as screen decreases in size
misc. note → Tanthai already created the horizontal aspect of grid in Figma last time

<aside> ✒️ | Detailed Notes

</aside>

UI Grids

A UI designer's primer to responsive grids

Types of Grids

responsive grids = scale and reorient with user's view, scale and contain content rather than guide it, are FLUID (contrasts with design grids, which simply guide content)
can have responsive grids in parts of design, i.e google calendar's calendar scales but not the static content surrounding it