Layout Fundamentals - Containers, Columns & Gutters

A container is a wrapper element that constrains the maximum width of content and centers it on the page. It prevents text and content from stretching across the full width of very wide screens - which would create uncomfortably long line lengths and difficult-to-scan layouts. On most modern websites and apps, containers have a defined maximum width (typically 1200px-1440px for desktop) with auto margins on either side that grow as the screen exceeds the container width, keeping content centered. Containers naturally create the 'side whitespace' seen on most professional websites - the visible margin between content and the screen edge. The size of this container and its padding directly affects how spacious vs compact a layout feels. Tight-container designs (max 960px) feel focused and editorial (like Medium or Substack). Wide-container designs (1440px+) feel expansive and data-rich (like Figma or Notion). In Figma design, containers are represented by the outer auto-layout frame that constrains your design at a specific max-width. A standard desktop design begins with a 1440px frame, with a 120px-160px side padding creating the effective content area of 1100px-1200px.

These three spacing concepts are frequently confused and incorrectly used interchangeably. Margin is the space outside an element - the gap between the element's outer boundary and surrounding elements. Margins collapse in CSS (two adjacent 24px margins = one 24px gap, not 48px). In designs, margin creates separation between distinct sections. Padding is the space inside an element - the gap between the element's boundary and its internal content. Padding adds breathing room within a component. A button with 12px vertical padding and 24px horizontal padding has exactly that much space between its border and its label text. Gutter is the specific term for the space between columns in a grid system - it's a type of margin, but it has a fixed value defined by the grid, not arbitrary spacing. Understanding these distinctions matters for design handoff: engineers implement margins, padding, and gutters through different CSS properties. When you annotate your designs correctly, implementation is direct and accurate.