Common Layout Patterns

Layout design is not always original composition. A large proportion of the screens you will design fit a pattern that has been solved many times before. Recognising these patterns is not a shortcut — it is professional knowledge. A pattern is a proven solution to a recurring problem. Starting from a pattern means starting from a foundation that already solves the structural challenge, leaving your energy for the content and the detail.

Hero + content

The most common marketing page pattern. A full-width section — often image-backed — leads with a strong headline and a call to action. Below it, content is typically structured in alternating left-right sections or a card grid.

The hero’s job is singular: establish what the product is and give the user one clear action. Every element in a hero that is not the headline, the sub-headline, or the CTA is competing with those elements. Effective hero layouts are minimal, not because minimalism is fashionable but because focus is functional.

Holy grail

A three-column structure: fixed-width left sidebar, flexible main content, fixed-width right sidebar, with a full-width header above and full-width footer below. The name comes from how difficult it was to implement in the early web without JavaScript. CSS Grid makes it trivial.

The holy grail is common in editorial and documentation layouts: left navigation, main article, right table of contents. On narrow screens, the sidebars typically collapse: the left sidebar becomes a top navigation, the right sidebar disappears or becomes an expandable section at the bottom.

Card grid

A repeating grid of equal-sized items, each representing an object: an article, a product, a person, a project. The grid is symmetric — every card has the same structure, the same visual weight, the same status. The user is browsing, not being guided.

Card grids work best when the objects they represent are genuinely equal in status. When one object should be emphasised — a featured product, a promoted article — a featured card variant breaks the symmetry with purpose.

Featured card patterns within a grid need to solve three problems simultaneously: visual prominence (the featured item must read as categorically different, not just slightly larger), content parity (the featured card often shows more content — a larger image, a subtitle, a summary — while regular cards show less), and responsive behaviour (a card that spans two columns on desktop must degrade gracefully to a single column on mobile without losing its featured status).

Common approaches: a card that spans the full width as a horizontal strip (image left, text right) above the regular grid; a card occupying the first two columns of a four-column grid while remaining cards fill normally; or a grid where the first item is rendered in a distinct component with its own layout. The key rule: the featured card is not just a big version of the regular card — it is a different component serving a different function.

Sidebar + main

A fixed or proportional sidebar alongside a main content area. Used in dashboards, settings screens, email clients, and documentation. The sidebar provides navigation or meta-information; the main area renders the selected content.

On narrow viewports, this pattern typically collapses to a hamburger menu or a full-screen overlay navigation, with the main area taking the full width. The sidebar’s content often determines the breakpoint: if the sidebar contains navigation that can be moved to an overlay, the layout can simplify aggressively. If the sidebar contains persistent controls (filters, properties), the collapse behaviour needs more care.

Reading layout (single column)

An article, a blog post, a policy document. Full-width header, single narrow column of text, full-width footer. The column width is determined by comfortable reading line length — not by the layout container. On wide screens, the column sits centred in a lot of surrounding whitespace. This is not a failure to use the full width. It is a choice to optimise for reading comfort.

Long-form reading layouts often add a sticky element (table of contents, reading progress) that floats alongside the text on desktop and collapses to a top-of-page summary on mobile.

Dashboard

A dashboard presents a high-level view of a system’s state across multiple metrics. The structural challenge is information density: many data points must coexist without any single metric dominating, yet the most important metric must remain immediately legible.

The dashboard pattern typically uses a fixed sidebar for navigation and a main area divided into a grid of cards — each card representing one metric or data type. Unlike a browsing card grid, dashboard cards have an implicit hierarchy: primary metrics are larger, secondary metrics are smaller, and tertiary detail is accessible on drill-down. Use CSS Grid with auto-fill and minmax for the card grid so cards reflow as the sidebar collapses:

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

The dashboard is the layout pattern most vulnerable to feature creep — new metrics are added until the dashboard becomes a wall of data with no focal point. Enforce a hierarchy: one primary card, two to four secondary cards, remaining detail in subordinate sections.

Split-screen

A split-screen layout divides the viewport into two equal or near-equal halves presenting distinct but related content. Common uses: a list on the left with the selected item’s detail on the right (master–detail); an onboarding form on one side with contextual illustration on the other; a comparison showing two states side by side.

The critical design decision is breakpoint behaviour. A 50/50 split at desktop widths becomes unusable at tablet widths (each pane is too narrow) and impossible at mobile widths. At the primary breakpoint, the split typically collapses to a single column with navigation between panes via tabs or a back button. Design this transition explicitly — left or right from which pane navigates where is a spatial decision that affects the user’s mental model.

Full-width media with text overlay

A section where an image or video occupies the full width and text is placed on top. Common in marketing heroes and editorial content. The structural risk is legibility: text on a variable-background image may be readable in some areas and not in others.

Solutions in order of reliability: a dark or light scrim (semi-transparent overlay on the image before the text layer); restricting text to a consistently dark or light region of the image; a gradient from a solid colour at one edge fading into transparency. Placing text directly on an image without one of these mechanisms and trusting that the image will always provide sufficient contrast is a legibility failure waiting to happen — the image will change, the contrast will not be checked, and someone will report unreadable text.

Mega menus

A mega menu is a large dropdown panel triggered from a primary navigation item — typically containing a grid of links organised by sub-category, often with supporting imagery or descriptions. It is appropriate when a navigation section has enough depth and breadth that a single flat list would be unwieldy: large e-commerce catalogues, documentation hubs with multiple sections, enterprise applications with many modules.

The structural content is a grid of groups, each group with a heading and several links beneath it. The panel is full-width or viewport-width, so all groups are visible simultaneously and users can jump directly to the section they want.

Accessibility requirements are specific. The trigger must use aria-expanded to communicate the panel’s state. Arrow key navigation should move between groups and links within the open panel. Escape must close the panel and return focus to the trigger. The DOM order must place the panel immediately after the trigger — not at the end of the document — so keyboard-only users encounter it in a logical sequence without having to tab through the entire page first.

On mobile, the mega menu pattern typically collapses to an accordion: each primary navigation item expands in-line to show its sub-categories, maintaining the same content without requiring a fixed panel to overlay a small screen.

Combining patterns

Most pages combine patterns. A marketing page uses hero + content in the header section, a card grid for the feature overview, and a centred reading layout for a detailed feature section. A dashboard uses sidebar + main as the outer structure, with card grids and tables inside the main area.

The patterns are not mutually exclusive — they are the vocabulary of layout composition. Understanding each one gives you the elements; understanding how they combine gives you the pages. The final article in this hub — layout and content type — examines how to choose the right pattern for a given content model.