Grid 1 is a visual representation of our grid.
- The blue background is the row.
- The green background are the columns within the row. They have no intrinsic height. I've set them all to a min-height of 50px.
- The blue border on the outer edges is 10px. This is built-in, and we can turn it off.
- This container doesn't run full-bleed because this is only an asset. If it's inside of a slot, it can run full-bleed.
- In between each col, the gutters are wider because each has 10px, so double 10px.
- It is entirely possible to do odd numbers of columns, do only 5 columns but center them, or mix and match.
- Auto-columns are also a thing, but they often behave in unpredictable ways.
- Final caveat is that these don't have a fixed height, and sometimes will act oddly with responsive image sizing. In those cases there's often some back-and-forth until we all find a solution that works best.
Grid 2 is a visual representation of our padding and margin sizes.
- Our sizes are in degrees of 1-5. They're in 8 pixel increments. 1 is 8px, 2 is 16px, 3 is 24px, 4 is 32px, 5 is 40px.
- We can apply to all sides, inside and outside (padding and margin), and combine this for quite a lot of spacing and alignment.