Layout & Composition

Busted

• 12-column gridThe standard web layout skeleton: one row split into 12 equal columns, so blocks can take clean halves, thirds, quarters, or sixths.
• Above the foldEverything visible when a page loads, before anyone scrolls. From newspapers sold folded in half on the stand.
• AlignmentPutting edges, centers, or baselines on the same invisible line. Most 'this looks messy' complaints are really alignment.
• Alternating layoutStacked feature rows where the image and text swap sides each time, so the page zig-zags down instead of repeating one shape.
• Asymmetric layoutDeliberately unbalanced arrangement that still feels composed: weight on one side answered by space or scale on the other.
• Baseline gridEvenly spaced horizontal guides that text sits on, keeping lines aligned across columns like writing on ruled paper.
• Bento gridA grid of rounded tiles in mixed sizes, packed like a bento box, each holding one feature, stat, or screenshot.
• BreakpointThe screen width where a layout rearranges itself: columns stack, the nav collapses, the sidebar drops below the content.
• Card layoutChunking content into repeated rectangles, each a self-contained unit with its own image, title, and link.
• Centered layoutMain content gathered around the page's middle axis, usually inside a width-limited wrapper with equal space on both sides.
• Column spanHow many tracks a grid item stretches across, such as a featured card occupying eight columns in a 12-column grid.
• Container / max-width wrapperThe centered box that caps how wide content can stretch, so a giant monitor doesn't turn every paragraph into one endless line.
• Content widthHow wide the reading column is allowed to get. Roughly 60 to 75 characters a line before the eye starts losing its place.
• Content with sidebar layoutA wide main content area paired with a narrower column for navigation, filters, metadata, or other supporting material.
• Editorial layoutA magazine-like page with mixed columns, pull quotes, and images placed to give a story pace and personality.
• F-pattern layoutOn poorly formatted, text-heavy left-to-right pages, readers fall into an F-shaped scan: full first line, a shorter second pass, then a skim down the left edge.
• Fluid layout vs fixed-width layoutFluid layouts stretch with the window; fixed-width layouts hold one width. Most modern pages stretch until they reach a sensible cap.
• Full-bleedAn element that runs edge to edge across the whole screen, escaping the centered container everything else sits in.
• Golden ratio layoutAn asymmetric split based on 1.618 to 1, usually about 62% for the main area and 38% for its companion.
• Grid overlay / layout guidesGuide lines drawn over a page to reveal its columns, gutters, margins, and baselines so small alignment errors become obvious.
• Grid systemShared columns, rows, and gutters that every element snaps to, so a page looks aligned instead of eyeballed.
• GutterThe consistent gap between grid columns or neighboring elements. The space that keeps things apart without a line.
• Hero sectionThe big opening block at the top of a page: headline, one supporting line, a button, and a visual. The first thing anyone sees.
• Holy grail layoutThe classic page frame: header and footer across the page, fixed-width sidebars, and a center column that absorbs the remaining space.
• Horizontal band layoutA page split into full-width background stripes, each marking a new section while the content stays aligned to one inner grid.
• Intrinsic layoutA responsive layout where content and available space decide when things wrap or resize, instead of a stack of device breakpoints.
• Law of proximityThings placed close together read as one group. Spacing, not boxes or lines, is what tells people which items belong with which.
• Masonry layoutA grid where every column is the same width but items keep their own heights, so rows never line up. The Pinterest look.
• Mobile-first layoutDesigning and coding the narrow phone layout first, then adding complexity as the screen gets wider.
• Multi-column layoutContent arranged in three or more vertical lanes, either flowing like newspaper text or sitting as separate grid regions.
• Optical alignmentNudging things off their measured position so they look aligned, because the eye judges shapes, not bounding boxes.
• Overlap / layeringLetting elements cross over each other's edges on purpose, so the page reads as stacked layers instead of stacked blocks.
• Page anatomyThe standard names for a page's regions (header, hero, main, aside, footer) so you can point at one part and be understood.
• ReflowContent wrapping and rearranging as space changes, so it stays readable without being clipped or making the whole page scroll sideways.
• Responsive layoutOne layout that rearranges itself to fit any screen, from phone to widescreen, instead of a separate mobile site.
• Rule of thirdsSplit a page into a 3x3 grid and place the headline or key image on a line or intersection instead of parking everything in the middle.
• Sidebar / railA narrow column pinned beside the main content, usually for navigation. A 'rail' is the skinny icon-led version, labels optional.
• Single-column layoutOne clear stream of content running down the page, with no second column or sidebar competing beside it.
• Spacing scaleA fixed short list of allowed spacing values (4, 8, 16, 24, 32) so every gap on the page comes from the same set.
• Split-screen layoutThe page cut into two equal side-by-side halves, usually one visual and one block of text, each doing its own job.
• Stack layoutElements placed one below another with one consistent rule controlling the vertical space between them.
• Sticky footerA footer that reaches the bottom of the screen on short pages, but moves down normally when the content grows taller.
• Sticky headerA nav bar that stays pinned to the top of the screen while the rest of the page scrolls underneath it.
• Sticky scrollytellingA scrolling story where one visual stays pinned while nearby text steps pass it and update what the visual shows.
• Sticky sidebar (position: sticky)A sidebar that scrolls with the page until it reaches the top, stays there, then stops at the end of its section.
• Symmetrical layoutA composition balanced around a central axis, with both sides matching exactly or carrying similar visual weight.
• Two-column layoutTwo regions sitting side by side, either evenly split or sized differently to match what each side needs to do.
• Visual hierarchyUsing size, weight, color, and position to decide what the eye hits first, second, and third. Importance made visible.
• Whitespace / negative spaceThe empty room around and between elements. Not wasted space: it groups things, sets pace, and makes what matters readable.
• Z-pattern layoutPutting the key elements at the corners of a Z so the eye sweeps across, down the diagonal, then across again. For sparse pages.

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