Layout & Composition

The territory

30 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.

• Hero sectionBig top-of-page block with headline, visual, and call-to-action"the big banner at the top" · "the first thing you see"
• Above the foldContent visible before any scrolling happens"what you see without scrolling" · "the top screen bit"
• Visual hierarchySize, weight, and position ranking what gets noticed first"make this stand out more" · "what to look at first"
• Whitespace / negative spaceEmpty breathing room between elements, not wasted space"let it breathe" · "less cramped"
• Responsive layoutArrangement adapting to different screen sizes and orientations"works on mobile too" · "resizes with the window"
• Grid systemShared rows and columns aligning elements across a page"the invisible lines" · "keep everything lined up"
• BreakpointScreen width where the layout rearranges itself"where it goes mobile" · "when the columns stack"
• Container / max-width wrapperCentered box capping how wide content stretches"stop it stretching so wide" · "keep text in the middle"
• Card layoutContent chunked into repeated rectangular containers"little boxes for each thing" · "tiles with a shadow"
• Sticky headerNav bar that stays pinned while the page scrolls"menu that follows you down" · "bar that stays put"
• AlignmentPositioning edges, centers, or baselines along shared guides"line these up" · "make it flush"
• Content widthHow wide the main text column is allowed to be"lines are too long" · "keep paragraphs narrow"
• Bento gridRounded tiles of mixed sizes packed into one grid"those Apple-style boxes" · "tiles of different sizes"
• Full-bleedElement spanning edge to edge, ignoring the container margins"goes all the way across" · "no margins on the sides"
• Split-screen layoutPage divided into two equal side-by-side halves"half image half text" · "two columns down the middle"
• Sidebar / railNarrow persistent column beside main content for nav"the strip down the side" · "left menu column"
• GutterThe space between grid columns or adjacent elements"gap between columns" · "spacing in between"
• Spacing scaleFixed set of allowed spacing values, e.g. 4/8/16"8-point grid" · "consistent padding numbers"
• Mobile-first layoutDesigning the narrow layout before the wide one"start with phone" · "phone version first"
• 12-column gridStandard flexible column system underlying most web layouts"the invisible columns" · "designer grid lines"
• Masonry layoutStaggered columns where items have unequal heights"Pinterest-style" · "bricks that stack unevenly"
• Alternating layoutRepeated rows swapping image and text sides"zig-zag sections" · "image left then right"
• Law of proximityNearness signals which items belong together"put related things closer" · "group it by spacing"
• Vertical rhythmConsistent repeating spacing intervals down the page"even spacing all the way down" · "consistent gaps"
• Z-pattern layoutSparse pages scanned along a Z shaped path"guiding the eye across" · "corner to corner"
• F-pattern layoutText-heavy pages scanned along an F shaped path"people only read the top lines" · "where people look first"
• Page anatomyNamed page regions: header, hero, body, aside, footer"parts of the page" · "what to call each section"
• Asymmetric layoutDeliberately unbalanced arrangement that still feels composed"off-center on purpose" · "not perfectly balanced"
• Overlap / layeringElements deliberately crossing over each other's edges"card sitting on the image" · "sticking out over it"
• Optical alignmentNudging elements so they look aligned, not measure aligned"looks off even though it lines up" · "shift it a hair"

Deeper in the field

• Holy grail layout Header, footer, fixed sidebars, fluid center column
• Sticky footer Footer pinned to viewport bottom on short pages
• Fluid layout vs fixed-width layout Percentage-based stretching versus locked pixel widths
• Intrinsic layout Elements size themselves from content, not media queries
• Baseline grid Horizontal lines text sits on for cross-column alignment
• Sticky sidebar (position: sticky) Aside that scrolls then parks in place
• Horizontal band layout Alternating background bands marking page sections
• Golden ratio layout Proportions based on the 1.618 ratio
• Grid overlay / layout guides Visible guide lines used to check alignment
• Sticky scrollytelling Panel pinned while adjacent content scrolls past it
• Rule of thirds Splitting a frame into ninths and placing focus on lines
• Editorial layout Magazine-like composition with pull quotes and mixed columns
• Reflow Content rearranging safely when available width changes
• Single-column layout One primary vertical content stream
• Two-column layout Two side-by-side regions with independent or unequal widths
• Multi-column layout Content distributed across three or more vertical columns
• Content with sidebar layout Primary content paired with a narrower supporting column
• Symmetrical layout Evenly balanced elements arranged around a central axis
• Column span Number of grid columns occupied by an element
• Centered layout Main content arranged around a central page axis
• Stack layout Elements arranged vertically with consistent spacing