A CSS layout method that removes an element from the normal document flow and positions it relative to its nearest positioned ancestor. This technique is useful for overlays, badges, and decorative elements that need precise placement regardless of surrounding content. Use sparingly, as absolutely positioned elements don’t affect the layout of other elements and can cause overlap issues on different screen sizes.

A Framer feature that automatically arranges child elements in a row or column with consistent spacing, similar to CSS Flexbox. This powerful tool creates responsive designs that adapt to content changes—add or remove items and the layout adjusts automatically. Auto Layout is essential for building reusable components like navigation bars, card grids, and form fields.

A specific screen width where your design adapts to a different layout, ensuring your site looks good on all devices from phones to large monitors. Strategic breakpoint choices prevent awkward in-between states where content becomes cramped or overly stretched. Framer's breakpoint system lets you customize layouts at each size while maintaining a single source of truth for your design.

A version of a component or layout specifically designed for a particular screen size, allowing different arrangements at each breakpoint. This approach provides precise control over how elements restack, resize, or hide across devices. In Framer, create breakpoint variants to transform horizontal navbars into mobile hamburger menus or reflow card grids into single columns.

A CMS that groups related items together, like blog posts, team members, or products. Collections define the fields and data types for each item, ensuring consistent structure across entries. Connect collection items to dynamic pages to automatically generate individual pages for each entry with consistent layouts. See CMS collections, items & fields.structured content type in Framer’s

A component that displays multiple items from a cmsCMS collection, automatically repeating a template for each entry. Collection lists power dynamic content displays like blog feeds, portfolio grids, and product catalogs. Framer collection lists support filtering, sorting, limiting, and responsive layouts. See Utilizing collection lists in Framer.

Rules that define how an element should resize or reposition when its parent container changes size. Constraints control whether elements stretch, stay fixed, or maintain proportional relationships during responsive resizing. Setting constraints correctly in Framer ensures your layouts adapt elegantly across different screen sizes.

A parent element that holds and organizes child elements, defining boundaries for layout and positioning. Containers with maximum widths prevent content from becoming too wide on large screens while allowing full-width backgrounds. Framer's containers support auto layout, padding, and responsive size controls for flexible layouts.

The property that determines whether flexbox children are arranged in rows (horizontal) or columns (vertical). This setting affects wrapping, alignment, and spacing behavior within a flex container. In Framer layoutauto layout, direction maps to horizontal or vertical stacking.

A CSS layout system designed for one-dimensional layouts, distributing space among items in rows or columns. Flexbox excels at navigation bars, card rows, and any content that should grow or shrink responsively. Framer's auto layout is powered by flexbox concepts, making these layouts visual and intuitive.

The fundamental container element in Framer that holds content and defines boundaries for layout, sizing, and visual properties. Frames are the building blocks of every Framer design, from tiny icons to full page layouts. Unlike groups, frames have their own properties and can contain responsive layouts and effects.

The space between elements in a flex or grid layout, providing consistent gutters without margin manipulation. Gap is cleaner than margins because it only applies between items, not at container edges. In Framer's auto layout, gap controls the spacing between child elements uniformly.

A layout system that divides space into rows and columns, creating alignment and structure for content placement. Grid systems ensure visual consistency and make responsive design more predictable. Framer supports CSS Grid concepts through layout tools that adapt columns and gaps across breakpoints.

A flexbox property that controls how items are distributed along the main axis, using values like center, space-between, and space-around. It affects horizontal spacing in rows and vertical spacing in columns. In Framer layoutauto layout, it helps control distribution and balance.

The space outside an element’s border, creating separation from neighboring elements. Margin helps control rhythm and spacing between blocks of content. In Framer, use spacing controls and layoutauto layout gap for consistent, predictable layout behavior.

CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.

The CSS property determining how an element is placed in the document flow—static, relative, absolute, fixed, or sticky. Understanding positioning is essential for creating overlays, sticky elements, and complex layouts. Framer provides visual controls for common positioning patterns.

Positioning that keeps an element in normal document flow while allowing offset adjustments from its default location. It is useful for minor visual nudges and for establishing a positioning context for absolutely positioned children. Prefer layout tools for larger structural alignment.

An approach that makes websites adapt fluidly to different screen sizes and devices through flexible grids, images, and CSS. Responsive design ensures optimal experiences whether viewing on phones, tablets, or desktop monitors. Framer's breakpoint system enables precise control over layouts at each screen size.

A transform that spins an element around a center point by a specified angle measured in degrees. Rotation adds dynamism and visual interest to layouts and interactions. Combine rotation with other transforms for complex motion sequences.

A distinct content area of a page, typically spanning full width and containing related information. Sections organize long pages into digestible chunks with clear visual separation. Design sections with consistent spacing, backgrounds, and layouts that create rhythm as users scroll.

A layout component that arranges children in a vertical or horizontal sequence with consistent spacing. Stacks simplify common layout patterns and maintain consistent gaps between elements. Use Framer's auto layout or stack components for structured arrangements.

A pre-designed, reusable starting point containing layout structure, styles, and often placeholder content. Templates accelerate projects by providing tested foundations rather than starting from scratch. Framer offers professional templates for common site types that can be fully customized.

A CSS unit equal to 1% of the browser viewport height, enabling layouts relative to screen size. Vh units are useful for full-screen sections and height-based layouts. Be aware that vh can behave unexpectedly on mobile due to address bar behavior.

Cascading Style Sheets—the styling language that controls how HTML elements appear, including colors, fonts, spacing, and layouts. While Framer generates CSS automatically from your visual designs, understanding CSS concepts helps you troubleshoot issues and leverage advanced features. Custom CSS can be added through code components or overrides when needed.

Document Object Model — the programming interface representing HTML documents as a tree structure that JavaScript can manipulate. Understanding the DOM helps debug layout issues and write effective custom code.

User Interface—the visual elements and interactive components through which users engage with a product. Good UI is intuitive, consistent, and aligned with user expectations and mental models. UI design balances aesthetic appeal with functional usability.

A low-fidelity visual representation of a page layout focusing on structure and content hierarchy without detailed styling. Wireframes help validate concepts quickly before investing in visual design. In Framer, you can start with simple shapes and progressively add detail as designs evolve.

Related AI terms: First Draft and Prompt-to-Code.

The proportional relationship between an element's width and height, expressed as a ratio like 16:9 or 4:3. Maintaining consistent aspect ratios prevents layout shifts when images load and ensures visual harmony across different screen sizes. Framer preserves aspect ratios automatically when you resize images proportionally by holding Shift while dragging. See Using images with unique aspect ratios in the CMS.

Design that adapts fluidly to mobile screen sizes through flexible layouts, scaled typography, and touch-friendly interactions. Mobile responsiveness is essential as mobile traffic often exceeds desktop. Test designs on actual devices to catch issues emulators miss.

Temporary content indicating where final content will appear, helping visualize layouts before content is ready. Placeholders can be lorem ipsum text, gray boxes, or sample images. Replace placeholders with real content before launch—they can accidentally go live.

The invisible line where the bottom of most letters sit, used as a reference point for aligning text and maintaining vertical rhythm. Baseline alignment ensures multiple text elements appear visually connected even at different sizes. Understanding baselines helps create polished typography in multi-column layouts.

A mathematical proportion of approximately 1:1.618 found throughout nature and art, often used to create aesthetically pleasing layouts. The golden ratio can guide element sizing, spacing, and composition decisions. While not a strict rule, it provides a starting point for harmonious proportions.

Psychology-based design rules explaining how humans perceive visual elements as unified wholes, including proximity, similarity, closure, and continuity. Applying gestalt principles creates intuitive groupings and relationships without explicit visual separators. These principles underpin effective layout and information architecture.

The arrangement of elements to show their order of importance through size, color, contrast, and position. Strong hierarchy guides users through content in the intended order and highlights key actions. Squint at your design—hierarchy issues become obvious when details blur.

The positioning of elements relative to each other or a container to create visual order and clarity. Strong alignment improves scanability and perceived quality. In Framer, layoutauto layout and constraints help maintain consistent alignment across breakpoints.

A pre-production environment used to review and test changes before they go live. Staging helps teams validate content, layout, and behavior safely before publishing to the production site. See Publishing your Framer website.

The Framer interface panel used to add elements, components, sections, and assets to a page. It centralizes building blocks so you can quickly compose layouts and interactions. See Using the insert panel in Framer.

A workflow where content is edited directly in the context of the live page layout rather than in a separate form view. This improves editorial speed and reduces context switching.

Cumulative Layout Shift (CLS) quantifies visual instability by measuring how much elements move unexpectedly during page load and interaction.

Breakpoint Overrides are responsive design adjustments applied at specific viewport widths so elements can adapt without changing the base design.

Site Preview is a non-production view of a site used to test design, content, and interactions before a production publish.

Find Similar Designs is an AI retrieval feature that helps teams discover visually related assets in large files or libraries. It supports consistency by linking discovery to your Design System and optional Style Reference inputs.

InstructPix2Pix applies natural-language editing commands to existing images while retaining layout context. It extends ideas from Prompt-to-Prompt Editing within practical Text-to-Image Generation pipelines.

What is vibe design?

Vibe design is the practice of directing the look, feel, and layout of a user interface through natural language prompts and AI-assisted tools instead of manually adjusting every canvas detail.

Why it matters

It helps teams move from intent to interface faster. Instead of starting with blank frames, spacing rules, and individual style decisions, creators can describe the desired outcome, then refine the generated result through iteration.

Example

A designer might ask for a calm editorial landing page, a dense SaaS comparison section, or a playful onboarding screen. The prompt sets the direction, while follow-up edits tune hierarchy, copy, layout, and interaction details.

How it works in Framer

In Framer, vibe design works best when the prompt describes the visible goal clearly: audience, structure, density, tone, and important content. The AI can then create or revise editable canvas elements while keeping the result aligned with the site’s design system.

Reference recreation is the process of rebuilding a design from an image, URL, or example while preserving its layout, style, and visual hierarchy.

In AI-assisted website creation, reference recreation helps teams move faster without losing control of structure, content, performance, or editable design details.

A responsive pass is a focused review and adjustment of layouts, spacing, type, and media across tablet and phone breakpoints.

In AI-assisted website creation, responsive pass helps teams move faster without losing control of structure, content, performance, or editable design details.

An agent workflow is a sequence of AI-assisted steps for planning, editing, reviewing, and shipping work in a digital project.

An agent workflow breaks complex website work into smaller actions such as scanning pages, updating CMS items, improving layout, and reviewing changes. Clear workflows help teams use AI without giving up control over quality or publishing decisions.

Agent review is the process of checking AI-made changes for accuracy, visual quality, links, accessibility, and consistency before publishing.

Agent review is important because AI can make fast changes across content and design. A review pass catches duplicate content, broken links, weak metadata, layout issues, or edits that do not match the project’s existing structure.

Agent QA is the use of an AI agent to find and help fix issues such as broken links, duplicate content, missing metadata, or inconsistent layout.

Agent QA supports quality assurance by scanning project content and structure for problems. It is most useful when paired with human review, especially before merging a branch or publishing a site.

A bento grid in Framer helps present product features, media, and proof points in a structured but expressive layout, using cards that can span different rows or columns.

A masonry layout in Framer is useful for galleries, inspiration feeds, templates, and cards where uneven content should feel organic rather than forced into equal rows.

In Framer, radial gradients can highlight sections, create soft glows, add background atmosphere, or draw attention to important content without adding image assets.

Framer auto sizing keeps cards, buttons, sections, and text groups flexible, making responsive layouts easier to maintain as content changes.

In Framer, sticky positioning is useful for sidebars, navigation aids, comparison panels, and storytelling layouts where one element should remain visible during part of the scroll.

Framer tickers can add motion to marquees, partner logos, feature labels, and repeated content while preserving a clean editable layout.

Framer layout templates help teams reuse global structure across pages, keeping navigation, footers, and shared layout behavior consistent while each page keeps its own content.

In Framer, truncation is useful for cards, lists, and CMS-driven content where titles or descriptions may vary in length but the layout should remain aligned.

In Framer, tables in CMS rich text are useful for structured information like comparisons, specs, schedules, and reference data without building a separate custom layout for every entry.

In Framer, CMS Galleries make it easier to publish collections of images, portfolios, case studies, or visual entries while keeping layout design separate from content updates.

In Framer, SEO-ready sites combine editable metadata, clean page structure, fast loading, responsive layouts, and publishing tools that help pages perform well in search.