Attempting to create a Flexbox grid with flexible vertical spacing between children

[Chuck_Braman]

I’m creating a Flexbox grid with two rows and two columns, where each child has a different quantity of text, and therefore a different natural height.

Right now, though, Flex is forcing the height of horizontally adjacent children to be the same height as whichever of the two horizontally adjacent children has the most amount of text and therefore is tallest.

I’ve made a 3-minute video demonstrating the behavior and layout I’m describing, vs. the behavior and layout that I would like to achieve: Loom | Free Screen & Video Recording Software | Loom

Thank you in advance to anyone who may be able to offer advice as to what I need to do differently in order to achieve a layout with flexible vertical spacing between vertically adjacent children.

Here is my site Read-Only: https://preview.webflow.com/preview/nyjb?utm_medium=preview_link&utm_source=designer&utm_content=nyjb&preview=ea34186c112ddd00fd9db345adbd7339&pageId=6171e626fe3ffcc6b5c7f44c&workflow=preview

[Chuck_Braman]

I haven’t yet received a response to my first post above, so in the meantime, I’ve tried a different approach, this time using columns. It achieves the layout, but unfortunately with this approach, the bottom collection item in the first column gets split across the second column.

I’ve made a 2-minute video demonstrating this: Loom | Free Screen & Video Recording Software | Loom

Here is my site Read-Only: https://preview.webflow.com/preview/nyjb?utm_medium=preview_link&utm_source=designer&utm_content=nyjb&preview=ea34186c112ddd00fd9db345adbd7339&pageId=6171e626fe3ffcc6b5c7f44c&workflow=preview

As before, if anyone could offer any advice as to how I could achieve this layout using Flex, Grid, or Columns, I would really appreciate your help.

Thanks.

[Chuck_Braman]

Found the solution here: Masonry Layout