Stage 2 · Lesson 2 of 7
The box model and layout
Every element is a box. From the inside out, it has content, (space inside the border), a border and margin (space outside the border). Its display setting (block, flex, grid, inline or none) decides how the boxes inside it are arranged.
In Webflow these are the first controls in the . Flexbox lines items up in a row or a column. Grid handles rows and columns at the same time, such as a grid of cards.
Relative units such as and percentages keep layouts flexible across screens. Almost every layout bug in Webflow is a box doing something you did not expect: a fixed width, a stray margin or the wrong display. Learning to read the spacing panel and outline elements saves hours.
Common trapfixing alignment with manual margins on individual elements instead of using the parent's flex or grid settings.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with
- CourseFreeWebflow University
Webflow · Beginner
Free official video courses; start with Webflow 101, then the CMS and layout lessons