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

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.

The space inside an element, between its content and border. Padding improves readability and visual balance by creating internal breathing room. Consistent padding values help maintain a coherent design system.

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 rotating display of multiple pieces of content within a single space, allowing users to navigate through items using arrows or swipe gestures. While carousels save space, studies show users often miss content beyond the first slide—consider whether a grid might be more effective. If using carousels, ensure clear navigation indicators and consider auto-play carefully.

An image format made of a grid of colored pixels where quality degrades when scaled up, common formats include PNG and JPEG. Bitmaps excel at photographs and complex imagery but become pixelated at larger sizes. Use vector formats for logos and icons that need to scale across different contexts.

Images composed of pixels in a fixed grid, ideal for photographs but losing quality when enlarged beyond original size. Raster formats like JPEG and PNG are standard for photographs and complex imagery. Use appropriate resolutions and compression for web delivery.

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.