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.

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

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.

A design approach that starts with the mobile experience and progressively enhances for larger screens. Mobile-first forces prioritization and ensures the smallest screens get the best experience, not a squeezed afterthought. This approach often results in cleaner, more focused designs at all screen sizes.

The relative size of elements in relation to each other and the overall design, establishing hierarchy and emphasis. Scale creates visual drama—dramatically larger elements command attention while smaller ones recede. Consider how scale relationships change across breakpoints in responsive designs.

A named value stored centrally that can be reused throughout your project and updated globally from one location. Variables enable design systems by ensuring consistent values for colors, spacing, radii, and more. Framer's variable system supports colors, numbers, and responsive values.

The horizontal measurement of an element, definable as fixed pixels, percentages, or content-based sizing. Responsive designs often use percentage or max-width rather than fixed widths for flexibility. Framer's sizing controls support fixed, relative, and content-based width options.

An image that adapts to different screen sizes and resolutions, serving appropriately sized versions for each context. Responsive images improve performance by avoiding unnecessarily large downloads on small screens. Framer handles responsive images automatically, serving optimized versions.

An HTML tag telling mobile browsers how to scale and size the page for their screens. The viewport meta tag is essential for mobile-responsive designs to display correctly. Framer automatically includes proper viewport settings.

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.

Dots Per Inch—a measure of print resolution indicating how many ink dots fit in one inch, affecting print quality and file size. Higher DPI produces sharper prints but larger files. For web, focus on PPI (pixels per inch) and responsive images rather than DPI.

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

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.

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

In Framer, responsive images help pages load faster and look sharp by serving suitable image sizes instead of forcing every visitor to download oversized assets.