To stack grid items on top of each other in Webflow's mobile view, you need to modify the grid layout to a single column layout for that specific breakpoint.
1. Switch to Mobile View
- Click the mobile device icon in Webflow’s top toolbar (Mobile Landscape or Mobile Portrait).
- This ensures changes you make only affect mobile breakpoints and do not override desktop settings.
2. Select the Grid Element
- Click on the grid in the Navigator or directly on the canvas.
- Make sure you're selecting the parent grid container, not an individual grid item.
3. Adjust Grid Layout to a Single Column
- In the Style panel, scroll to the Grid section.
- Set the columns to 1 and adjust rows to “Auto” (or remove extra row definitions if unnecessary).
- This stacks each grid item vertically.
4. Check for Manual Positioning
- If a grid item appears out of place, check the manual placement settings.
- Go to the grid item > Style panel > Grid Child Settings, and disable “Manual” positioning if it's turned on.
5. Test the Layout
- Use Webflow’s built-in preview tool to ensure everything stacks vertically and displays properly on mobile.
Summary
To stack grid items in mobile, set the grid to one column within the mobile breakpoint, and make sure manual positioning is off. This causes each item to render in its own row, stacking them vertically.