Wrapping column contents

/Editor FOUNDATIONS

Alright, let's recap what we’ve covered so far.

We’ve learned that the content inside columns and inner columns can be arranged in one direction only—either top to bottom (like a column) or left to right (like a row).

We also saw how you can adjust the alignment of all these elements using the buttons under the content alignment property. Plus, Flexbox can automatically distribute space for you, so you don’t have to manually set margins for each element to get everything lined up perfectly. Just imagine doing that with 10 elements like we have in our example—it would be pretty tedious!

Now, what happens if you have too many widgets in one column? That’s where the Wrap property comes in, which shows up only when the Stacking Direction is set to horizontal. There’s also another hidden property called Align Rows that appears once the Wrap property is enabled. Let's begin!