A fluid grid is the structural backbone of a responsive page. Instead of fixing column widths in pixels, you express them as proportions of their container — percentages, fr units, em and rem — so the layout reflows and rescales continuously as the viewport changes. The classic conversion formula (target divided by context equals result) lets you take an existing fixed-width comp and translate each column and gutter into a relative value that preserves the original proportions.
In this module, fluid grids are one of the three pillars of responsive design, alongside flexible images and media queries. Modern CSS gives you two purpose-built layout modules for the job: Flexbox, which distributes space along a single axis and is ideal for navigation bars, card rows, and component-level alignment, and CSS Grid, which defines rows and columns together for full two-dimensional page structure. You also need to understand how padding, borders, and gutters interact with percentage widths — which is why box-sizing: border-box and the gap property matter so much in fluid layouts.
As you watch the videos below, focus on three things: which unit or layout method the presenter chooses and why, how spacing between items is created (margins versus gap), and how the layout behaves when the browser window is resized. Try rebuilding each example yourself and then drag your browser edge or use DevTools device emulation to verify that nothing overflows, collapses, or breaks at in-between widths.
This tutorial compares Flexbox and CSS Grid as layout modules and, as the title indicates, focuses on deciding which one fits a given situation. Expect discussion of one-dimensional versus two-dimensional layout thinking, content-driven versus layout-driven sizing, and practical examples of where each module is the better tool. It is likely to also touch on using the two together, since Grid items can themselves be flex containers.
Envato Tuts+ is a well-established web development training publisher, and this video directly addresses the Flexbox and CSS Grid subtopics by framing them as complementary rather than competing tools — exactly the judgment you need when planning a fluid layout.
A compact, hands-on build in which CSS Grid is used to create a full-height, responsive page layout. It should demonstrate defining rows and columns with flexible units, making a layout fill the viewport height, and letting the grid adapt as the screen size changes. Watch for how track sizes and gaps are declared and how the structure holds together at different widths.
This gives you a short, practical demonstration of CSS Grid for two-dimensional layout and reinforces how fluid track sizing and gutters work in a real page rather than an isolated snippet.
An overview of the CSS display values used for layout — block, inline, none, flex, grid, inline-flex, and inline-grid — explained through Webflow's visual interface. It should clarify what each display mode does to an element and its children, and when designers reach for one over another. The visual presentation makes the differences between flow layout, flex layout, and grid layout easy to see.
Webflow's design team produces clear, well-illustrated layout content, and this video provides the conceptual foundation underneath Flexbox and Grid, helping you understand how display modes govern the box model and spacing behavior in fluid layouts.
Together these videos concentrate on MO2, the construction of fluid grid layouts that scale proportionally. The Webflow overview establishes the display and box-model vocabulary you need, the Envato Tuts+ comparison helps you choose correctly between Flexbox and CSS Grid for a given layout problem, and the CSS Grid walkthrough shows a responsive, full-height structure being built end to end. They also reinforce MO1 by illustrating the fluid-grid pillar of responsive design in practice, and the resizing demonstrations prepare you for testing and validating fluid behavior. Readings and lab work in this module cover the relative-unit conversion math, responsive images (MO3), and mobile-first breakpoint strategy (MO4, MO5).
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.