How can I create a responsive grid in Webflow, where a 3x3 grid of images on desktop becomes a 2x2 grid on tablet and a 1x1 grid on mobile?

TL;DR
  • Create a 3x3 grid on desktop by setting a section with a grid-container Div Block, adding 3 columns and 3 rows.
  • Adjust to a 2x2 grid on tablet by modifying the grid-container in Tablet view.
  • Switch to a 1x1 grid for both mobile landscape and portrait views, ensuring responsive design.

Creating a responsive grid in Webflow can ensure a seamless user experience across different devices. Here's how to achieve a 3x3 grid on desktop, a 2x2 grid on tablet, and a 1x1 grid on mobile.

​

1. Setting Up the Initial Grid on Desktop

  • Create a new section in your Webflow project where you want the grid to appear.
  • Add a Div Block inside the section and give it a class name such as grid-container.
  • Set the Display Setting of the grid-container to Grid.
  • Define the grid by clicking on Edit Grid and creating 3 columns and 3 rows.
  • Drag and drop images into each cell of the grid.

​

2. Adjusting the Grid for Tablet View

  • Switch to Tablet view in the Webflow Designer by clicking on the appropriate icon.
  • Select the grid-container and click Edit Grid.
  • Change the number of columns to 2 and the number of rows to 2.
  • If necessary, adjust image placement to ensure all images are displayed as intended.

​

3. Setting the Grid for Mobile Landscape and Portrait

  • Switch to Mobile Landscape view.
  • Select the grid-container and again click Edit Grid.
  • Change the grid to have 1 column and 1 row.
  • Repeat the same steps for Mobile Portrait view to maintain consistency.

  

Summary

To create a responsive grid in Webflow: Set a 3x3 grid on desktop, switch to a 2x2 grid on tablet, and adjust to a 1x1 grid on mobile devices. This ensures that your images adapt smoothly across various screen sizes.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there an alternative to using the embed widget in Webflow to set a custom attribute for the value of a form text field, since the attribute name "value" is reserved? Can Webflow remove the value attribute from the reserved list, as they have done with other attributes like maxLength?
Why is my Webflow slider not working as intended when I try to link to a specific slide using the created links?
What is the best script I can use in Webflow for a pop-up to allow visitors to accept cookies?
Can someone help me with redirecting a webpage on Webflow to a new URL after printing 20,000 QR codes with the old URL? It doesn't seem like putting the new URL in the 301 hosting page section is working. Thank you.
How can I disable autoplay and enable hover-based play for background videos in Webflow?
How can I create a dropdown menu in Webflow that filters blog content based on selected categories from a separate CMS?
Why do users receive a "Passwords cannot be collected" popup when attempting to log in or sign up on our published Webflow site?
Can Webflow forms be pre-filled with information?
How can I resolve various performance issues, such as eliminating render-blocking resources, deferring unused CSS, ensuring text remains visible during webfont load, minimizing main-thread work, serving static assets with an efficient cache policy, reducing JavaScript execution time, avoiding an excessive DOM size, and minimizing Critical Requests Depth in my Webflow site?
What are some of the best tools and integrations for Webflow?
What are some plug and play, customizable options to implement a searchable map in Webflow to show business partners near the user?
What are some ways to optimize a large JSON file from an exported image sequence in Webflow?
What is the correct format to pass an array of URLs to the Multi Image field in Webflow's API for updating?
Has anyone used Passage by 1Password with the Webflow built-in user CMS?
Can the background color of a fixed navbar in Webflow be changed from transparent to a different color when a visitor starts scrolling?
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?