grids

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 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 track wider than the reading column but narrower than the viewport, used for figures and code that need more room than prose.

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

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

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.

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 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.

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

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.

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

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.

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.

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.

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

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

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.

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

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.

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 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.

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

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

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

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.

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

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

A deliberately awkward style that breaks layout, type, and color conventions so the interface reads as a statement rather than as a polished product.

A style reduced to primary red, yellow, and blue on off-white, elementary circles, triangles, and squares, and undecorated sans serif type.

A style built only from black rules, rectangular fields, and the three primaries on white, arranged asymmetrically with no curves and no diagonals.

A style that borrows print magazine craft for the screen: a visible column grid, display type at poster scale, pull quotes, rules, and captioned images set into the text.

The Swiss modernist system of a strict grid, flush left sans serif type, asymmetric layout, and objective photography, still the base of clean UI layout.

Spacing every block of text by multiples of one line height so the page keeps an even beat from top to bottom.