Skip to content
Chapter 02 of 05 · 4 lessons · ~38 min

Layout and Styling

Build solid layouts with sections, containers, flexbox and grid, and style efficiently with classes, combo classes and global styles.

YOUR PROGRESS0%
/ Lessons in this chapter
03
Webflow Layout Basics: Sections, Containers and Divs How to structure pages with sections, containers and div blocks, and how the box model controls spacing. Coming soon
04
Webflow Classes and Combo Classes How classes and combo classes work in Webflow and how to name and organize them so a site stays maintainable. Coming soon
05
Flexbox and Grid in Webflow How to build rows, columns and card grids with flexbox and grid in Webflow's Style panel. Coming soon
06
Typography and Global Styles in Webflow How to set site-wide typography and design tokens so every page is consistent and easy to update. Coming soon

Chapter practice task

Task: Build a services section with a reusable card system and global typography

  1. Build a section with a container, a heading and a grid of six cards.
  2. Use a base card class and a card is-featured combo class.
  3. Lay out the card internals with flexbox.
  4. Set global styles for body text and headings, and create color and size variables.

By the end of this chapter

  • You can structure any page with sections, containers and wrappers
  • You use classes and combo classes in an organized way
  • You can lay out anything with flexbox and grid
  • Your typography and colors are consistent through global styles and variables

Quick answers for this chapter

Margin or padding?

Padding is space inside an element (including its background). Margin is space outside it. Most layout spacing is padding on sections and gaps in flex or grid.

Why use combo classes?

To create variations of a base style (like a highlighted card) without duplicating everything.

Where do I set the default font?

On the Body (All Pages) tag in the Style panel, or with font variables.