HTML & CSS in Webflow: Box Model, Flexbox and Grid
The ideas behind Webflow without writing code: structure and nesting, classes, the box model, Flexbox, Grid and CSS units, while building the Chai Corner menu.
💡Key ideas
The ideas behind Webflow without writing code: structure and nesting, classes, the box model, Flexbox, Grid and CSS units, while building the Chai Corner menu.
HTML is structure, CSS is style
Every element you add is HTML. Everything you change in the Style panel is CSS. Like a house: walls and rooms vs paint and furniture.
The box model
Every element is a box with four layers: content, padding (inside), border, margin (outside).
Flexbox = one direction
A row or a column: a navigation bar, a group of buttons, a stacked hero.
Grid = two directions
Rows and columns together: a product list, a gallery, a menu. Like an egg tray.
⏱️Chapters
Click a chapter to jump to that moment in the video.
📋Step-by-step
Tick each step as you build it in your own site. Your ticks are saved.
Structure the hero
Build the menu with Grid
⚙️CSS units
| Unit | Relative to | Use it for |
|---|---|---|
| px | Fixed size | Spacing, borders (beginner default) |
| % | The parent box | Widths |
| rem | Base font size (usually 16px) | Font sizes, consistent spacing |
| vw / vh | Screen width / height | Full-screen sections |
.hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding: 80px 40px;
}
.menu-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}⚠️Common mistakes
div-block-7. Use hero, menu-grid, menu-card.🧠Recap & quiz
First the recap question from the video, then the quiz. Your best score is saved.
Recap: What is the difference between padding and margin?
Q1 of 4 · The owner wants a photo gallery with three photos per row and many rows. Which layout?
Q2 of 4 · Padding is space…
Q3 of 4 · Which unit is relative to the parent box?
Q4 of 4 · You change the padding of one menu card and all three change. Why?
🏠Homework
Do this on your own site before the next lesson.
❓FAQ & key terms
What is a div in Webflow?
A Box element. It holds other elements so you can move and style them as one group.
Do I need HTML and CSS to use Webflow?
No, but understanding the ideas helps you design faster and fix problems in seconds.
Which unit should beginners use?
Pixels for spacing and percent for widths.
Lesson 04 of 11 · All cheat sheets · Watch on YouTube
Save your progress
Enter your name and email once. We'll remember your ticked steps, quiz scores and completed lessons, so you can continue on any device.
No spam. Only course updates, and you can unsubscribe any time.
