Introduction to Layout in Framer

In this video we discuss how the Position, Size and Layout properties work and how they can be combined to build layouts.

Framer gives us three properties for controlling layout:

  • Position: how an element places itself in the document flow.

  • Size: how an element sizes itself in the available space.

  • Layout: how an element divides up the available space for its children.

These are all based on the underlying CSS layout properties so you may recognise them. However, Framer adds some guardrails so there are some differences to consider, even if you have used CSS before.