Learn 44 Layout concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
The browser's default block-and-inline document layout before special positioning is applied.
Create a semantic content page that relies on normal document flow, uses logical spacing instead of positional offsets, preserves a readable source order, and reflows cleanly for zoomed and narrow viewports.A one-dimensional system for distributing and aligning items along a row or column.
Create a responsive one-dimensional Flexbox layout with sensible wrapping, gap-based spacing, min-width: 0 on flexible children, alignment that works in both directions, and source order that remains logical for keyboard and screen-reader users.A two-dimensional system for arranging content into explicit rows and columns.
Create a responsive CSS Grid layout with named areas, explicit gaps, minmax tracks, robust overflow handling, and a single-column fallback that preserves the semantic source order.A nested grid whose tracks align with those defined by its parent grid.
Create a card collection using CSS subgrid so each card's heading, content, and action align to shared parent rows, while retaining a clear fallback and avoiding fixed content heights.Continuous content that flows vertically through newspaper-like columns.
Create a readable CSS multi-column article with a comfortable column width, balanced gaps and rules, headings that avoid awkward breaks, and a single-column presentation on small screens; use it for continuous text rather than unrelated UI cards.Elements placed relative to a containing block with relative, absolute, sticky, or fixed positioning.
Create a positioned interface element anchored to a clearly established containing block, avoid covering essential content, handle viewport edges and zoom, and keep DOM order and focus behavior meaningful.Content that wraps around a floated image, pull quote, or other compact object.
Create editorial text that wraps around a floated image with an appropriate caption, logical margins, a reliable clearfix or flow-root container, and a stacked treatment when space becomes limited.A row-and-column structure for genuinely tabular data with aligned cells and headers.
Create a semantic responsive data table with caption, row and column headers, aligned numeric values, readable density, horizontal overflow that does not clip the page, and an accessible narrow-screen strategy.A content-driven layout that adapts using min-content, max-content, fit-content, minmax, and auto-fit.
Create an intrinsic card layout using repeat(auto-fit, minmax()) and content-aware sizing so components wrap without hard-coded device breakpoints, long content can shrink safely, and no horizontal overflow is introduced.A maximum-width content wrapper centered in the viewport with protective side padding.
Create a centered page container with a readable max-width, fluid inline gutters using clamp(), full support for narrow screens, and logical properties that work in left-to-right and right-to-left layouts.A width-filling wrapper whose gutters and internal tracks scale with available space.
Create a fluid page container that uses the available width, applies responsive gutters, constrains overly long text within nested measures, respects safe-area insets, and avoids accidental viewport overflow.A vertical sequence of elements separated by one consistent spacing rule.
Create a reusable vertical Stack component using a single configurable gap, support nested stacks and optional dividers, avoid child-specific margins, and preserve natural document flow.A wrapping row of related items such as tags, actions, or compact controls.
Create a reusable Cluster component for related controls or tags using Flexbox, wrapping, consistent gap, configurable alignment and justification, and stable behavior for long labels and narrow containers.Content centered horizontally, vertically, or both within its available area.
Create a centering layout that can center content on either or both axes, uses Grid or Flexbox rather than transforms, remains stable for dynamic content, and falls back to scrollable top alignment when content exceeds the viewport.A full-height composition with optional header and footer around a vertically centered principal region.
Create a Cover layout with optional header and footer, a main region centered in the remaining space, min-height based on dynamic viewport units, safe-area support, and natural overflow when content becomes taller than the screen.A narrow companion region beside flexible main content that stacks when space runs out.
Create a responsive sidebar composition with a bounded sidebar, flexible min-width: 0 main region, gap-based spacing, logical source order, and intrinsic wrapping to a vertical stack without relying only on viewport breakpoints.Two groups pushed to opposite edges while keeping consistent alignment and wrapping.
Create a Split layout for a title and action group using flexible spacing, wrap safely when labels grow, keep actions in a logical source order, and avoid fragile absolute positioning.An image or icon beside a flexible block of text and supporting content.
Create a responsive media object with fixed-size meaningful media, flexible text that can shrink without overflow, aligned metadata and actions, useful alternative text, and an optional stacked treatment for narrow containers.A media frame that preserves a chosen width-to-height ratio as its container changes.
Create a responsive media frame with CSS aspect-ratio, appropriate object-fit behavior, intrinsic dimensions to reduce layout shift, a useful fallback, and controls that remain operable at different sizes.Selected sections extend to the viewport edge while the main content stays on a readable measure.
Create a full-bleed article layout where chosen media or sections extend edge-to-edge while text remains in a centered readable column, without negative-margin overflow or broken horizontal scrolling.One focused vertical content column optimized for reading or completing a task.
Create a focused single-column page with a readable line length, clear heading hierarchy, predictable vertical rhythm, optional anchored actions, and responsive gutters for small and large viewports.A primary region paired with a secondary column for context, controls, or related content.
Create a responsive two-column page with a dominant main region and narrower complementary aside, semantic landmarks, independent min-width constraints, and a logical single-column order on small screens.A central content region supported by two narrower side regions.
Create a responsive three-column page with a flexible central region, bounded side columns, deliberate collapse priorities, semantic landmarks, and no loss of content or functionality at narrow widths and high zoom.A header, footer, main content, and two sidebars arranged as a classic responsive page shell.
Create a modern Holy Grail layout with semantic header, main, complementary sidebars, and footer; use CSS Grid, keep the main region fluid, stack regions in a logical source order, and make the footer follow content naturally.A persistent application frame with navigation, top bar, content workspace, and optional inspector.
Create a responsive application shell with semantic navigation and main landmarks, collapsible sidebar, top bar, scrollable workspace, min-height: 0 and min-width: 0 in nested Grid or Flex regions, preserved focus, and mobile drawer behavior.A page with a header that remains at the viewport edge while the main content scrolls.
Create a sticky or fixed header layout that avoids obscuring headings, focused controls, and anchor targets; supports safe areas and zoom; prevents layout jumps; and becomes non-sticky when viewport height is constrained.A scannable arrangement of metrics, charts, tables, and actions with clear priority.
Create a responsive dashboard grid with clearly prioritized KPIs, charts, recent activity, and actions; use semantic headings, consistent card alignment, adaptive column spans, accessible data alternatives, and no information conveyed by color alone.A repeatable grid of self-contained cards that adapts the number of columns to available width.
Create an accessible responsive card grid using auto-fit or explicit responsive columns, consistent gaps, equal visual alignment without fixed content heights, correctly scoped interactive targets, and a sensible list alternative.A continuous stream of similarly structured content optimized for browsing and discovery.
Create a responsive content feed with clear item boundaries, stable media dimensions, meaningful chronology, accessible load-more or pagination behavior, preserved position when content updates, and compact-to-expanded adaptations.A collection pane paired with a detailed view of the currently selected item.
Create an adaptive list-detail layout with a selectable list, clearly labelled detail region, synchronized selection and URL state, preserved scroll and focus, side-by-side presentation on wide screens, and drill-in/back navigation on compact screens.Primary content accompanied by a contextual pane for related tools, details, or assistance.
Create an adaptive supporting-pane layout with a dominant main task and a clearly related secondary pane, sensible wide and medium arrangements, an accessible compact-screen modal or separate view, and explicit close and return-focus behavior.Two substantial regions share the viewport, often pairing brand media with an interactive task.
Create a responsive split-screen composition with two meaningful regions, balanced but not necessarily equal sizing, controlled media cropping, logical reading order, and a stacked narrow-screen layout that keeps the primary task first.An editorial grid combining a lead story with varied supporting story sizes and rhythm.
Create a responsive editorial magazine layout with one clear lead story, varied but consistent supporting modules, readable text measures, stable media ratios, semantic article order, and a simple linear small-screen presentation.A modular grid of differently sized panels arranged into a cohesive rectangular composition.
Create a responsive bento grid with intentional large and small feature tiles, consistent gaps and radii, concise content hierarchy, robust grid spans, logical source order, and a balanced single-column fallback.Unequal-height items packed into columns to reduce vertical gaps.
Create a responsive masonry-style collection with stable item dimensions, logical DOM and focus order, progressive enhancement for CSS masonry where supported, a dependable multi-column or Grid fallback, and no content jumping during media load.A visual collection of images or media with consistent browsing and selection behavior.
Create an accessible responsive media gallery with intrinsic image dimensions, appropriate object-fit, useful alternative text or captions, keyboard-operable item actions, lazy loading, and a column count that adapts to its container.A structured page that aligns field groups, guidance, validation, and actions for efficient completion.
Create a responsive form page layout with grouped fields, persistent labels, aligned but source-ordered controls, full-width rows for long answers, inline guidance and validation, a single-column mobile layout, and a clear action area.A column, gutter, and margin system that changes structure across available screen widths.
Create a responsive twelve- or sixteen-column grid with documented margins, gutters, max width, and span rules; reduce columns at suitable content breakpoints, support fluid and constrained regions, and expose reusable layout tokens.A layout that starts with the compact experience and progressively enhances as space becomes available.
Create a mobile-first responsive layout beginning with a robust single-column base, add enhancements with content-driven min-width queries, retain all important functionality and readable targets, and avoid desktop assumptions in source order.A layout that changes at explicit content-driven media-query thresholds.
Create a responsive layout with a small set of content-driven breakpoints rather than device names, document what changes at each threshold, support zoom and reflow, and test just before and after every breakpoint.A reusable component that changes based on its containing element rather than the viewport.
Create a reusable component with an inline-size containment context and CSS container queries, provide sensible intrinsic defaults, avoid coupling it to viewport breakpoints, and adapt composition, typography, and actions at component-relevant widths.Visual placement changes across layouts while the underlying source and focus order stay meaningful.
Create a responsive composition whose visual placement changes between compact and wide layouts while preserving a logical DOM, reading, and keyboard focus order; avoid positive tabindex and verify that CSS order does not change task meaning.A footer that sits at the viewport bottom on short pages and follows content naturally on long pages.
Create a sticky-footer page using a min-height Grid or Flex column so the footer rests at the viewport bottom when content is short and follows normal flow when content is long, including dynamic viewport and safe-area handling.Adjacent work areas separated by a draggable, keyboard-operable divider.
Create a resizable split-pane layout with a visible separator using role=separator, pointer and keyboard resizing, announced value limits, practical minimum pane sizes, persisted preference, double-click reset, and a stacked compact-screen alternative.