How can I create a responsive grid layout in Webflow with an image and text, which stacks in a 2 x 1 layout on mobile?

TL;DR
  • Create a Div Block set to Grid with 2 columns and 1 row for desktop, placing the image and text in separate cells.  
  • On the mobile breakpoint, change the grid to 1 column and 2 rows to stack content vertically, adjusting item order and styling as needed.

To create a responsive grid layout in Webflow with an image and text that stacks in a 2 x 1 layout on mobile (one on top of the other), use Webflow’s CSS Grid feature with responsive settings.

​

1. Create a Grid Container

​

  • Drag a Div Block onto the canvas and give it a class name like “Grid Layout”.
  • In the Style panel, set the display to Grid.

​

2. Configure the Desktop Layout

​

  • In the grid layout settings, create 1 row and 2 columns.
  • Add your Image in the first cell and Text Block (or Div with text) in the second cell.
  • Adjust gaps, padding, or alignment as needed for spacing.

​

3. Switch to Mobile Breakpoint

​

  • Click the mobile portrait viewport in the top bar to adjust styles for mobile.
  • With the grid selected, in the Style panel under Grid settings, change columns to 1 and rows to 2.
  • The layout should now stack vertically: image on top, text below.

​

4. Optional: Adjust Order if Needed

​

  • If you want the text to appear above the image on mobile:
  • Select the grid items and use Manual positioning in Grid settings or set the order property in the Style panel for each item.

​

5. Responsive Text & Image Settings

​

  • Make sure the image is set to 100% width or “Cover” depending on your design needs.
  • Use relative units (like percentages, VW/VH, or EMs) for margins and font sizes to improve responsiveness.

​

Summary

​

Set a 2-column grid for desktop and switch to a 1-column, 2-row layout on mobile using Webflow’s Grid settings at different breakpoints. Adjust order and styling as needed for clean stacking behavior.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can the "Unsubscribe from notifications for this site." link be removed from the emails in Webflow to prevent third-party unsubscribes without warning?
How can I resolve the issue of over 20 redirects on one of my Webflow pages without affecting the rest of my site?
How can I troubleshoot form submission emails not being received by the client on a Webflow-hosted site?
How can I fix the issue of the sound of a YouTube video continuing to play in the background after closing a pop-up modal on my Webflow site?
How can I retrieve a Live Item ID and update the corresponding row in Google Sheets using Zapier integration with Webflow?
Why does the Webflow hosting platform experience downtime and performance issues, and why does their official status page not accurately reflect these issues? Is it normal for a major hosting provider like Webflow to have these problems?
How can I create a rotating animation in Webflow that continuously loops?
Is it possible to skew/angle only one side of a div in Webflow without affecting the other sides?
How can I create a modal in Webflow using CSS and positioning techniques?
How can I change the height of an embedded Vimeo video in Webflow?
How can I disable the default form submission and redirect functions in Webflow without breaking the code, while still being able to use my own JavaScript function?
How do I add a "follow on Instagram" button to my website using Webflow?
Is it possible to use the "video background" div block with CMS items in Webflow and upload videos to CMS items for dynamic calling in a template?
How can I fix the issue where the slideshow on my Webflow website's homepage is not showing up in the published version, but is visible in design mode?
How can I add a "Print Page" button to my website using Webflow and custom CSS to make the content print-friendly?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?