How do I control the wrapping of child elements in a grid in Webflow?
TL;DR
- Use Webflow’s grid settings to define rows/columns and enable auto-generated rows for wrapping.
- For responsive wrapping based on container width, use Flexbox with the Wrap option instead.
To control the wrapping of child elements in a grid in Webflow, you use grid layout settings and manual placement to manage cell behavior and content flow.
1. Use Webflow’s Grid Layout Controls
- Select the grid container, then click the grid icon in the right panel (Layout section).
- In the grid editor, define rows and columns explicitly to control layout structure.
- If content overflows, Webflow doesn’t automatically "wrap" elements in a CSS Grid unless you define new rows or allow auto-flow.
2. Enable Auto Row Generation
- With the grid selected, go to the Layout > Grid Settings.
- Under Rows, set the row count to Auto or add at least one row, then let Webflow create new ones based on content.
- This allows child elements to “wrap” into a new grid row when columns are filled.
3. Use Manual Child Placement (Optional)
- Click on each child element inside the grid.
- In the Style panel, adjust grid placement using Start/End line controls under Layout > Grid Positioning.
- Manually set which column and row each child element occupies for full precision control.
4. Consider Using Flexbox If Responsive Wrapping Is Needed
- If your goal is automatic responsiveness and wrapping (e.g., items flow to the next line based on available width), consider using Flexbox instead:
- Select the parent container.
- Set Display: Flex, then set Wrap: Wrap.
- This allows natural row-wrapping behavior that Grid doesn’t handle automatically.
Summary
To control grid wrapping in Webflow, enable auto-generated rows or add rows manually in your grid settings. If you need native responsive wrapping, using Flexbox with Wrap is often a better option.