How can I stack grid items on top of each other in Webflow's mobile view?
TL;DR
- Set the grid container to 1 column at the mobile breakpoint to stack items vertically.
- Alternatively, switch to Flex display with column direction and remove custom spans or positioning that interfere with stacking.
To stack grid items on top of each other in mobile view, you’ll need to adjust the grid layout settings or override them with Flexbox or manual positioning.
1. Adjust Grid Layout for Mobile Breakpoint
- Select the Grid container.
- Switch to the desired mobile breakpoint (rounded icons at the top of the Webflow Designer).
- In the Grid settings panel, set the number of columns to 1.
- The grid items will now stack vertically by default.
2. Override with Manual Positioning (Optional)
If stacking is still not working due to custom spans or position settings:
- Select each grid item, and ensure under the Layout panel:
- The Grid column and row spans are set to auto or appropriate single-cell values.
- There is no custom positioning (e.g., absolute/fixed) that prevents stacking.
3. Use Flexbox As an Alternative (If Needed)
If the Grid is too rigid for your mobile layout:
- On the mobile breakpoint, change the grid container display from Grid to Flex.
- Set flex-direction: Column to stack child elements vertically.
- You can also fine-tune alignment, spacing, or order using Flex controls.
Summary
To stack grid items on top of each other in Webflow's mobile view, reduce the grid columns to 1 in the mobile breakpoint or switch the layout to Flex with a column direction. Adjust or remove any custom spans or positioning to allow vertical stacking.