All videos

Equal height layouts with flexbox

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Equal height layouts with flexbox (2)

New version: https://youtu.be/HZx14P7lds0

When you're using the columns element in Webflow, it’s nearly impossible for all the columns to have equal heights, especially when each column has different content. You could set a fixed pixel height, but this can cause reflowing issues. In this video, we’ll show you how to create equal-height columnar layouts with flexbox.

Video details

Duration

1:47

Topic

Design & build

Continue watching

Equal height layouts with flexbox (2) - 图1<h3>Migrate a site to Webflow</h3>1:16:53

Equal height layouts with flexbox (2) - 图2<h3>Cursor follow interactions</h3>10:25

Equal height layouts with flexbox (2) - 图3<h3>Build a cursor-following 3D button</h3>5:15

Equal height layouts with flexbox (2) - 图4<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

Equal height layouts with flexbox (2) - 图5<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Equal height layouts with flexbox",
  "description": "New version: https://youtu.be/HZx14P7lds0",
  "url": "https://university.webflow.com/videos/equal-height-layouts-with-flexbox",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b947bfdf9545eb13504620_maxresdefault.webp",
  "duration": "1:47",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=gZTp1pLsfNc",
  "embedUrl": "https://www.youtube.com/embed/gZTp1pLsfNc",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}