Grid 1

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.