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.

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

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.

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.

Adjusting element positions based on visual perception rather than mathematical precision, making designs feel balanced. Optical alignment acknowledges that geometric centering doesn't always look centered to human eyes. Fine-tune alignments manually when mathematical precision creates visual imbalance.

Justified text alignment stretches line spacing so text aligns on both margins, improving visual structure but requiring careful spacing control.