Chapter 1: Layout & Styling (1.A)

Exam topic 1.A: Create responsive layouts and scalable class structures across breakpoints.
Key terms: Flexbox, grid, box model, breakpoints, relative units, style inheritance, class management, combo class.
Weight: 15% of the exam (about 7–8 questions)

Webflow is a visual editor for real CSS. Every choice in the Style panel turns into a selector and declarations in your site’s stylesheet. Advanced builders keep a picture of that generated CSS in their heads as they work, and that’s what this chapter teaches.

---

1.1 The box model, as Webflow implements it

Every element is a box made of content → padding → border → margin.

box-sizing: border-box is global

Webflow’s base stylesheet sets box-sizing: border-box on all elements. So:

.card { width: 300px; padding: 24px; border: 1px solid; }
/* Rendered width = 300px (padding and border are inside the width) */

With the old content-box model, that card would be 350px wide. Thanks to border-box you can add padding without breaking a grid or percentage layout, which is one reason width: 50% columns behave predictably in Webflow.

Margin vs. padding: the developer’s rule

Use	When
Padding	Space inside a component that belongs to it (a card’s inner breathing room, a section’s vertical rhythm). Padding takes the background colour and increases the clickable area.
Margin	Space between things. Prefer gap on the flex/grid parent where you can, so children don’t need margins at all.

Margin collapse: vertical margins between adjacent block elements collapse to the larger of the two (24px + 32px = 32px, not 56px). It doesn’t happen inside flex or grid containers. That’s a common source of “my spacing changed when I switched the parent to flex.”

Display types you must know

• block: takes the full available width and stacks vertically (Div Block, Section, Heading, Paragraph).
• inline: flows with text; width, height and vertical margins are ignored (Text Span, Link inside text).
• inline-block: flows inline but respects width, height and padding.
• flex / grid: turns the element into a layout container for its direct children.
• none: removed from layout and the accessibility tree. Different from opacity: 0 or visibility: hidden.

---

1.2 Flexbox: one-dimensional layout

Use flex when content flows along one axis: a navbar, a button with an icon, a row of cards that wraps, vertical centring.

Settings and what they produce

Style panel	CSS	Notes
Direction: Horizontal / Vertical	flex-direction: row / column	Changes which axis is “main”
Align (cross axis)	align-items	Default stretch, which is why flex children are equal height
Justify (main axis)	justify-content	space-between for navbars
Wrap	flex-wrap: wrap	Needed for multi-row card layouts
Gap	gap: row column	Replaces child margins; never doubles up at the edges
Child: Grow / Shrink / Basis	flex: 1 1 0% etc.	Set on the child, not the parent

Advanced gotchas

1. The min-width: auto trap. Flex items won’t shrink below their content’s minimum width. A long URL or a wide image inside a flex child overflows the row. Fix: set min-width: 0 (or overflow: hidden) on the child.
2. Equal columns: give each child flex: 1 1 0% (Grow 1, Shrink 1, Basis 0). With flex: 1 1 auto columns size by content and won’t be equal.
3. Reverse order (row-reverse, or order) changes the visual order only. Keyboard tab order and screen readers still follow the DOM. Don’t use it to reorder meaningful content.

---

1.3 Grid: two-dimensional layout

Use grid when you control rows and columns together: page layouts, bento-style feature sections, image galleries, forms with aligned labels.

Key concepts

• Tracks are defined on the parent: grid-template-columns: 1fr 1fr 1fr.
• fr splits the remaining space after fixed tracks.
• Auto-placement fills cells in order. Manual placement pins a child to cells (Webflow shows this as positioning children on the grid, or grid-column: span 2).
• Named areas let you rearrange layout per breakpoint without changing the DOM order.
• minmax() and auto-fit: a responsive grid with no breakpoint overrides:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

Webflow’s grid UI doesn’t build every CSS grid function visually. Advanced builders may add a small amount of custom CSS (an Embed with a <style> tag, or site-level custom code) for patterns like auto-fit, so they get zero breakpoint overrides. Keep custom CSS to a minimum and document it, because it doesn’t show up in the Style panel.

Grid vs. flex: a decision rule

If you’re aligning things in a line, use flex. If you’re placing things in a layout, use grid.

The two combine well: a grid for the page section and flex inside each card.

---

1.4 Breakpoints and the cascade

Webflow’s breakpoints are media queries. The base breakpoint is Desktop, and styles flow from it in two directions:

Breakpoint	Media query (generated)	Styles flow…
1920px and up (optional)	@media (min-width: 1920px)	inherits from smaller large breakpoints and base
1440px and up (optional)	@media (min-width: 1440px)	inherits from 1280 and base
1280px and up (optional)	@media (min-width: 1280px)	inherits from base
Desktop (base)	(no media query)	applies to all sizes unless overridden
Tablet	@media (max-width: 991px)	inherits from base
Mobile landscape	@media (max-width: 767px)	inherits from Tablet and base
Mobile portrait	@media (max-width: 479px)	inherits from all of the above

Consequences that show up on the exam:

• A change on Desktop affects every breakpoint unless a smaller (or larger) one overrides it. A change on Tablet cascades down to both mobile sizes, not up.
• The most maintainable approach is to style once on the base breakpoint and add intentional overrides only where the layout needs to change. (That’s the official sample question 2.)
• Designing on a larger breakpoint first can create overrides that every smaller breakpoint has to undo. Start at the base.

The Style panel colour language

• Blue property labels/values: set on the current selector, at the current breakpoint/state.
• Orange labels: the value is inherited: from a parent element (typography), from a larger breakpoint, or from the base class of a combo.

Click an orange label to see where the value comes from. That’s the quickest way to debug “why is this text 18px?”

---

1.5 Relative units

Unit	Relative to	Best for
%	Parent’s dimension (width for horizontal padding/margin too!)	Fluid widths
em	Current element’s font size	Padding on buttons that should scale with their own text
rem	Root (html) font size, which is 16px in browsers by default	Type scale, spacing system
vw / vh	Viewport width/height	Hero heights, fluid type in clamp()
ch	Width of the “0” glyph	Readable line length (max-width: 65ch)
fr	Remaining grid space	Grid tracks

A Webflow-specific trap: rem vs. the Body font size

Webflow’s default Body text size is 14px, but rem is relative to the html root, which stays at 16px. So 1rem = 16px even though your body text is 14px. Advanced builders usually set the body text to 1rem (or another deliberate value) so the type scale and spacing scale share one base.

Why rem matters for accessibility

When a user raises their browser’s default font size, rem-based type and spacing scale with it. Fixed px type ignores that preference. Use rem for font sizes and, ideally, for spacing too.

Fluid values with CSS functions

Webflow’s unit fields accept CSS functions such as calc() and clamp():

font-size: clamp(2rem, 1.2rem + 3vw, 4rem); /* fluid heading with min and max */
padding-inline: max(1.25rem, 5vw);

One clamp() value can replace three breakpoint overrides. Always keep a rem part in the middle term (not pure vw) so browser zoom still works.

---

1.6 Style inheritance

Two different mechanisms are both called “inheritance” in Webflow, and the exam expects you to tell them apart:

1. CSS inheritance (parent → child): typographic properties such as font-family, color, line-height, font-size, text-align and letter-spacing flow down the DOM. Layout properties such as padding, margin, width, display and background don’t. Set typography high in the tree (Body (All pages) tag) and override lower down only when you need to.
2. Cascade inheritance (selector → selector): a combo class inherits everything from its base class, a smaller breakpoint inherits from larger ones, and a state (Hover) inherits from the None state.

Tag selectors like Body (All pages), All H2 Headings and All Links are applied to every page. They’re the foundation of your global styles (Chapter 4). A class on an element beats the tag style because classes have higher specificity.

---

1.7 Class management

Naming: be semantic or systematic, never accidental

Webflow auto-names classes like Div Block 47 if you style without naming. Those names tell your team and your future self nothing. Common conventions:

• Client-First (Finsweet): section_hero, hero_content, padding-global, text-size-large. Underscore = custom component class, dash = utility.
• BEM-like: card, card__title, card--featured.
• Lumos / utility-first systems: lean on utilities and variables.

The exam doesn’t test a specific convention. It tests that you use one consistently.

Global vs. one-off styles

• A class used on many elements is global. Changing it changes all of them, which is what you want, as long as you know it’s happening. Webflow shows how many elements on the page and site use a class.
• Never style a widely used class to fix a single instance. Add a combo class or a utility instead.

Housekeeping

• Style manager: browse, rename and find every class.
• Clean up unused styles removes classes no element uses. Run it before handoff, because unused CSS still ships to every visitor.
• Duplicate class gives you an independent copy to diverge from. Rename changes it everywhere.

---

1.8 Combo classes

A combo class is a modifier that only exists together with a base class:

.button { padding: 0.75rem 1.5rem; background: var(--brand); color: white; }
.button.is-secondary { background: transparent; color: var(--brand); border: 1px solid; }

• The combo inherits everything from .button and overrides only what it declares.
• Changing .button updates every primary and secondary button. One source of truth.
• Styling .button.is-secondary never affects plain .button elements.

The stacking rule advanced builders need to know

In Webflow, any class added after the first becomes part of a compound selector. If you select an element with card and add is-featured, then style it, the CSS is written to .card.is-featured, not to .is-featured alone.

But if is-featured (or a utility like margin-bottom-large) already has standalone styles from being used as a first class somewhere else, those standalone styles also apply when you stack it. That’s how utility-class systems work in Webflow: a global utility stacked on a component class still applies its own rule. Any new styles you add while both are selected go to the compound selector only.

When not to use a combo

• When the “variant” is really a different component with a different structure. Make a new class or component.
• When combos pile up (.card.is-featured.is-dark.is-wide.is-compact). That signals you need component variants (Chapter 3) or variables (Chapter 4).

---

1.9 States and pseudo-classes

Webflow exposes states per selector: Hover, Pressed (:active), Focused (:focus), Focused (keyboard) (:focus-visible), Focus within (:focus-within), Visited, Placeholder, First/Last/Nth child, Current (for links to the current page or section).

Advanced points:

• Never remove focus outlines without replacing them. Style :focus-visible so keyboard users get a clear indicator and mouse users don’t see a ring on click.
• Current is how you style the active nav link without JavaScript (Webflow adds w--current).
• Hover effects don’t exist on touch devices. Don’t hide essential information behind hover.

---

1.10 Production checklist for layout & styling

• ☐ Every class is named intentionally; no Div Block 23.
• ☐ Layout uses gap instead of child margins where possible.
• ☐ Type and spacing use rem (or variables based on it).
• ☐ Base breakpoint styled first; overrides only where layout changes.
• ☐ Tested at in-between widths (e.g. 820px, 1100px), not just at breakpoint presets.
• ☐ No horizontal scroll at 320px (check 100vw widths, long words, and the flex min-width trap).
• ☐ Unused styles cleaned up.
• ☐ Focus states visible.

---

Practice questions: Layout & Styling

Answer them all first, then check the answers and explanations below.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Δ