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.