Anatomy of a Grid: Columns, Gutters, and Margins

A grid is an underlying structure of intersecting horizontal and vertical guidelines used to organize content with mathematical discipline:

1. Columns: The vertical blocks of space where content, cards, and text live. Width can be fixed (e.g., 68px) or fluid (percentage of container).
2. Gutters: The negative space separating adjacent columns. Gutters prevent content from visually colliding. Standard modern web gutters range from 16px to 32px.
3. Margins (Side Paddings): The outer whitespace between the outermost columns and the physical screen edge. Protects content from being clipped by device bezels.