Below is what i want it to look like:
Topic summary
A user is building a custom section and needs blocks to display in rows of three, with additional blocks automatically wrapping to new rows. Currently, adding a fourth block extends the existing row instead of creating a new one.
Problem Details:
- The user shared code screenshots and the page URL (www.shopinhouse.com/pages/podcast)
- Initial layout shows blocks continuing horizontally rather than wrapping
Solution Provided:
BSS-Commerce identified the issue in the CSS code:
- Remove:
flex-direction: column; - Add:
flex-wrap: wrap;
This CSS adjustment enables flexbox wrapping, allowing blocks to automatically start new rows after every three items. The solution was confirmed through screenshots showing the corrected layout matching the user’s desired three-column grid format.
