layout

The web's default column count, chosen because twelve divides cleanly into halves, thirds, quarters and sixths.

A spacing convention where every size and gap is a multiple of eight, so values stay whole numbers at every common screen density.

A layout that switches between a few discrete arrangements chosen per size class, rather than flowing continuously as the window changes.

A CSS mechanism that tethers one element to another, sizing and placing it against its anchor and trying fallback positions when the default one would overflow.

The persistent frame of an application, its header, navigation and footer, that stays put while only the content region swaps as you move around.

The recognisable outline of an app's chrome, which bars and panes it has and where they sit, used to classify one app's layout against another's.

A container that holds a fixed width to height proportion whatever its size, so media reserves its space before it loads.

A set of evenly spaced horizontal lines that every line of text sits on, so type in adjacent columns lines up across the page.

A grid whose cells are deliberately different sizes, tiled to fill a rectangle without gaps, like the compartments of a bento box.

A bordered container, optionally titled, that groups logically related controls so the grouping is drawn rather than implied by spacing alone.

A track wider than the reading column but narrower than the viewport, used for figures and code that need more room than prose.

A viewport width at which a layout is allowed to change shape, defined once so every screen in a system reflows at the same places.

A composition that sets up a grid and then deliberately violates it, overlapping and offsetting elements to create tension.

A scanning shape where readers deliberately skip the opening words of each line because every line in a list starts the same way.

One of a small set of proven multi pane arrangements a platform recommends, such as list detail, supporting pane and feed, instead of a new layout per screen.

Content laid out as equal width cards flowing across a responsive grid and wrapping to new rows as space allows.

How wide a chart is for its height, which sets the slopes of its lines; banking to 45 degrees keeps rates of change readable.

The parts of a window or app that frame content rather than being content: title bars, toolbars, tab strips and address bars.

A layout primitive that lays items of differing widths out like words in a paragraph, wrapping to new lines with even gaps in both directions.

A responsive pattern where full height columns peel off one at a time and stack below as the viewport narrows, keeping source order.

Pushing a column away from the grid's start so it begins on a later line, leaving deliberate empty tracks rather than an element to fill them.

The rare scanning shape where a motivated reader fixates on nearly every word, the only pattern that behaves like actual reading.

The grouping principle that anything inside a shared boundary reads as one group, strong enough to beat how far apart the items actually are.

Two or more grids of different column counts overlaid in one layout, so a page can carry several rhythms while still sharing one structure.

A wrapper that caps how wide content can get and adds the side padding that keeps it off the viewport edges.

A rule that responds to the size of a component's own container rather than the viewport, so one component adapts anywhere it is placed.

The box an element's percentages and offsets are measured against, which is not always its parent and changes with how the element is positioned.

Deciding how blocks of content reorder and regroup as a layout reflows, so hierarchy survives the collapse from several columns into one.

A horizontally scrolling row of cards, one row per category, stacked down the page so each row is browsed sideways.

A layout primitive that fills at least the viewport height, centring a principal element vertically with optional header and footer pinned above and below.

A grid of tiles, each holding one metric, chart or list, that a reader can often resize and rearrange.

A row of equal cards that wraps to fewer per line as space runs out, with the last line left aligned at its natural size rather than stretched to fill.

How much content a system packs into a given area, tuned as a named setting so the same components can run comfortable or compact.

A virtual unit of length that stays the same physical size across screen densities, so one number can describe a layout on every device.

The physical fold state of a foldable device, such as flat, book or tabletop, which a layout can respond to alongside plain size.

The camera housing that intrudes into the screen rectangle, which a layout has to route content around rather than under.

Drawing an app behind the system bars so content reaches the physical screen edges, with insets applied only to what must stay tappable.

The scanning shape eye tracking finds on text heavy pages: two horizontal sweeps across the top, then a vertical run down the left edge.

A scrolling column or adaptive grid of equivalent items built for browsing, where no item outranks another by position alone.

A focus plus context display that magnifies whatever has attention and progressively compresses everything further away, like a lens dragged along a list.

A grid whose columns and gutters are expressed as proportions rather than fixed pixels, so the whole composition stretches and shrinks with its container.

A spacing ramp whose every step interpolates between a minimum and a maximum viewport, so gaps grow smoothly with the screen instead of jumping at breakpoints.

The one element a composition is built around, given enough size, contrast or isolation that the eye lands there before anywhere else.

A layout that keeps one region in full detail inside its own surroundings, shrinking or dimming the context instead of moving it into a second pane.

A table column held against the edge while the rest scrolls sideways, so the row's identifying value stays readable.

An element that breaks past the content column to span the whole viewport width while its neighbours stay constrained.

The links to the top tier of a site's structure, present on every page and unchanged wherever the reader currently is.

The proportion of roughly 1 to 1.618 used to divide a layout, so its parts relate to each other by a rule instead of by arbitrary numbers.

The native masonry mechanism in CSS grid, where one axis keeps strict tracks and the other lets items stack into whichever lane has room.

A model splitting evenly weighted pages into four quadrants, with the eye falling from the primary area at top left to the terminal area at bottom right.

The space between columns or tracks in a grid, distinct from the outer margin that separates the grid from the container edge.

The large opening block of a page carrying a headline, a supporting line, imagery, and the main call to action.

A three column page with header and footer where the centre column is fluid, the two side columns are fixed, and all three appear equal height.

The thin bar at the bottom of a gesture driven phone screen, reserved space that app content must not sit beneath.

A layout primitive that positions one element centred over its container, overlapping whatever is beneath rather than taking a place in the flow.

A workspace with no page edges, where content is placed anywhere in an unbounded plane and the viewport pans and zooms over it instead of scrolling a document.

A pane, usually on the trailing edge, that shows and edits the properties of whatever is currently selected.

Building layouts from what the content needs, using grid, flexbox and intrinsic sizing together, instead of imposing a fixed column skeleton.

A photo grid that scales and trims images so every row lands on one shared height with flush left and right edges, unlike masonry's ragged columns.

A row of vertical columns, each one a stage, holding cards that move sideways as work progresses.

An invisible line that content across a whole screen aligns to, such as the edge line every row starts at and the deeper line where text begins after an icon.

A scanning shape for tables where the eye runs across one row, drops down and runs back the other way, mowing the cells in alternating directions.

A scanning shape where the eye reads headings and subheadings and skips the text between them, so the fixation map looks like stacked layers.

The shared column, gutter and margin structure a team lays every screen against, so different people's pages line up with each other.

The reserved space between a container's edge and its content, sized by the system so content never touches the edge of the screen.

Content moving after it has already been painted, usually because something arriving late took space that was never reserved for it.

A responsive pattern where the arrangement genuinely differs per breakpoint rather than reflowing, so each size gets its own composition.

Filling the mismatch between content shape and frame shape with bars: above and below for letterbox, at the sides for pillarbox.

A browsable list paired with a pane showing the selected item in full, collapsing to one screen at a time when the window is narrow.

Links contextual to where the reader is, showing the siblings and children of the current page rather than the whole site.

Layout properties named by flow direction (inline start, block end) rather than by screen edge, so a layout mirrors itself in other writing modes.

A row or grid of customer logos used as social proof, usually flattened to one colour so no brand dominates.

An editorial composition with mixed column widths, one dominant lead story and smaller supporting items arranged around it.

A scanning shape where the eye holds one spot on the screen while content scrolls past underneath it, most common on phones.

A column layout that packs items of unequal height by placing each one in the shortest column, so the rows never line up and the bottom edge stays ragged.

The pairing of a fixed size image or avatar on one side with a heading and text that fills the rest, repeated everywhere in interfaces.

A browsing layout of side-by-side columns where selecting an item in one column fills the next with its children, keeping the whole path visible.

Designing and writing the narrow layout first and adding rules as space is gained, so the small screen is the default rather than the fallback.

A grid with both columns and rows, dividing the page into equal modules that content can span in either direction.

A responsive pattern where a multi column grid stretches with the viewport up to a maximum width, then centres, stacking only on the smallest screens.

An application shell with three or more vertical regions, typically navigation, a list, and a reading pane, as in a mail client.

A windowing mode where two or more apps share one screen, side by side, stacked, or as freeform windows, so every app must survive being any size.

Naming regions of a grid and drawing the layout as rows of those names, so items are placed by name instead of by line number.

How a picture or video is resized inside a box whose shape it does not match: stretched to fill, letterboxed to fit whole, or cropped to cover every edge.

Keeping secondary regions parked outside the viewport and sliding them in on demand, instead of stacking them below the main content.

Nudging an element off its measured position so it looks aligned, correcting for shapes whose bounding box lies about their visual centre.

The inset a television layout keeps clear of the screen edge, about five percent, because sets crop the outer frame and anything near it disappears.

A layout that shows a compressed overview and a detailed view at the same time in separate regions, so the reader keeps their place while inspecting one part.

Where content is cut to continue in the next fragment, a printed page, a column or a region, plus the rules that decide where the cut may fall.

The band at the top of a screen carrying the page title, its context, and the actions that apply to the page as a whole.

A three row page where the header and footer take only the height they need and the middle row absorbs every remaining pixel, even when the content is short.

A layout container that holds one destination's content inside a window, either fixed or flexible in width, combined with other panes to fill the space.

A small always on top window that keeps video or navigation visible in a corner while the reader works in another app or scrolls another page.

How many physical pixels a display packs into an inch, and the reason a CSS pixel is a unit of measure rather than a dot on the screen.

The grouping principle that elements placed close together read as related, which is why spacing decides perceived structure more reliably than borders do.

A grid that decides its own column count from a minimum item width, so the same one line rule works at every screen size without a single breakpoint.

Designing what a layout does with the space it gains on very wide screens, rather than only what it drops as screens narrow.

One layout that adapts to any screen through fluid grids, flexible images and media queries, rather than a separate site built for each class of device.

Flipping a layout horizontally for right to left languages, moving navigation and progression to the other side while leaving some elements unmirrored.

Dividing a frame into nine equal cells with two lines each way and placing the important elements on the lines or their intersections.

The part of the screen guaranteed clear of notches, system bars and rounded corners, where interactive content can safely sit.

The frame that positions an app's persistent regions, its bars, panes and body, so each screen drops content into named slots instead of inventing its own arrangement.

The element that actually scrolls its overflowing content, distinct from the page, and the box the browser calls the scrollport.

Snap positions declared on a scroll container so scrolling settles on a chosen item edge instead of stopping wherever momentum runs out.

Switching between two views of the same content, a zoomed out view of group headings and a zoomed in view of individual items, instead of scaling pixels.

A persistent vertical region alongside the main content holding navigation or secondary controls, often collapsible on narrow screens.

A note placed in the outer margin beside the line it belongs to, rather than collected at the foot of the page.

The closing region of a site holding secondary navigation, legal links, and contact details that do not deserve top level placement.

The same small chart repeated in a grid, once per category, so comparison happens by eye movement instead of overplotting.

A deliberate empty element between regions: the gap between two panes that carries the drag handle when they resize, or the flexible filler that pushes toolbar items apart.

The fixed, named set of spacing values a system allows, so gaps come from a shortlist instead of being invented per screen.

How an app arranges itself when one window is stretched across two displays, either keeping content clear of the seam or splitting the layout exactly at it.

A page cut into two equal full height halves, each carrying its own message or path, with no hierarchy between them.

A layout of two or more side by side panes where a choice in the leading pane decides what the trailing pane shows.

A scanning shape where the eye jumps to isolated words scattered down the page, hunting a keyword, a link or a number rather than reading anything.

A layout primitive that puts one consistent gap between every child in a vertical run, so spacing lives with the parent instead of each item.

A self contained depth ordering created by certain properties, inside which z-index only competes locally and can never escape to the level above.

A thin strip along the edge of a window or screen that reports state and offers only minor actions, never the primary ones.

A footer held against the bottom of the viewport when the page is short, and pushed below the content when the page is long.

A header that scrolls away with the page until it reaches the top edge, then stays fixed there while the rest keeps moving.

A side column that scrolls with the page and then holds in place once its top reaches the viewport edge, releasing at the end of its container.

A nested grid that borrows its parent's tracks instead of defining its own, so contents of separate children still line up with each other.

A secondary pane holding content that only makes sense next to the main pane, placed beside it on wide windows and below it or behind a control on narrow ones.

A layout primitive that flips between a row and a column at a threshold it works out from its own width, with no media query involved.

Flowing one block of running text into several columns that fill and balance automatically, with an optional rule drawn between them.

The bottom edge of the first screenful, above which content is seen without any scrolling and below which it must be earned.

The arc of a phone screen a thumb reaches comfortably in a one handed grip, with harder to reach bands above and across from it.

The lightest responsive pattern: a single column design that only adjusts type size, image size and margins as the screen changes.

The layer above everything else in a document where fullscreen elements, modal dialogs and popovers render, escaping every ancestor's clipping and stacking order.

A slim bar that links a subsite back to its parent organisation's other sites, sitting above the subsite's own global navigation.

The strip of secondary tools and account actions, sign in, search, language, cart, kept apart from the links that describe the site's content.

The visible rectangle of a page inside the browser window, excluding the browser's own bars, and the unit basis for vh and vw.

The distribution of visual weight across a composition, reached by mirroring elements, by setting one large element against several small ones, or by radiating from a centre.

The empty area between and around elements, treated as an active design material rather than as leftover space.

A named bucket for how much width an app window has, such as compact, medium and expanded, used in place of raw device categories.

The scanning shape on sparse pages: across the top, diagonally down to the lower left, then across the bottom to the final call to action.

Alternating rows that flip which side the image and the text sit on, so the eye zigzags down a list of features.