How do I control the wrapping of child elements in a grid in Webflow?
TL;DR
- Use Grid layout and define the number of columns/rows to control how child elements wrap vertically (default) or fill horizontally.
- For flexible layouts, use Auto Fit/Fill in column settings; for full control, manually assign grid positions via Style panel.
To control the wrapping of child elements in a Grid in Webflow, use the Grid settings and placement behavior to determine how items fill and wrap inside cells.
1. Use Grid Layout, Not Flexbox
- Grids do not wrap in the same way as Flexbox.
- In a Grid, each child element is assigned to a specific row and column, either automatically or manually.
- Wrapping is controlled by adjusting the number of columns/rows in the Grid layout.
2. Let Grid Auto-Place Elements
- By default, child elements are auto-placed into the grid based on the number of columns and rows you define.
- If you add more items than existing cells, Webflow will create additional implicit rows to wrap new items vertically (not horizontally).
- Example: If your grid has 3 columns, and you add 5 items, the 4th and 5th items will wrap onto the second row.
3. Modify Number of Columns or Rows
- Select the grid container, then go to Element Settings (gear icon).
- Adjust the number of columns/rows in the Grid section to control how children are placed.
- Use Auto (Auto Fit / Auto Fill) in
frunits for flexible column layouts.
4. Position Items Manually (Optional)
- Select a grid child element, then use the Positioning controls in the Style panel.
- You can define which row start/end and column start/end each element occupies.
- This gives you more control but prevents auto-wrapping behavior.
5. Use “Auto Flow” Settings
- Grid uses grid-auto-flow: row (default) which means new items stack vertically.
- Webflow doesn’t expose auto-flow settings in the UI, but you can mimic horizontal flow by adjusting the template:
- Create more columns and fewer rows.
- Place items left-to-right by default.
- For advanced control like
grid-auto-flow: column, you’d need custom code (not supported directly in Webflow UI).
Summary
To control wrapping in a Webflow grid, manage the number of columns and rows to determine how items are placed. Grids auto-wrap vertically into new rows, not horizontally. For horizontal wrapping, increase columns. For precise control, manually position elements within the grid.