In Part 2 of our Mastering Flexbox series, we showed you how to create equal-height cards with aligned buttons using Align Items > Stretch, Justify Content > Space Between, and Grow To Fill. In this third installment, we’ll focus on one of the most important structure decisions in Divi 5: Layout Wrapping.
Layout Wrapping controls whether flex items stay on one line or move onto additional lines when there isn’t enough room. Choosing between No Wrap, Wrap, and Wrap Reverse affects how many rows you need, how your layout responds across breakpoints, and how much manual structure you have to manage.
In this post, we’ll compare No Wrap and Wrap structure templates, explain when each option makes sense, and show how supporting controls like Column Class, Align Content, and Display Order help you build cleaner responsive layouts without custom CSS.
Understanding Layout Wrapping In Divi 5
In Divi 5, Layout Wrapping controls whether direct child elements inside a Flex container stay on a single line or wrap onto additional lines when they run out of space.
This is important because wrapping only affects the direct children of the container you’re editing. For example, if you’re editing a Row, wrapping affects its Columns. If you’re editing a Module Group, wrapping affects the modules or groups inside it.
