How To Make Grid Responsive Webflow

‍

Here is how you can make Grid responsive in Webflow:

1. To begin, from inside your Webflow designer, go to the Add Elements section in the left sidebar menu.
2. Locate or search for the Grid element and drag it onto your project.
3. Now that we have a grid, populate it with content like Images.
4. To add an image simply drag and drop.
5. You can align the content of your grid from the Layout section on the right sidebar menu.
6. Once you have a populated grid, use the Preview button the top right to check its responsiveness.
7. You can adjust the width of the canvas using the handle on the right side.
8. Notice that your default Grid is not very responsive and stacks together on smaller screens.
9. Back inside the designer, select the grid and then locate the Layout section on the right sidebar menu.
10. Reduce the number of rows and columns to the lowest which is 1. This does not delete any content, instead, Webflow auto-generates the necessary space in rows and columns to fit the content.
11. You can adjust the direction for fill which controls if more columns or rows are created.
12. Go back into the Preview mode.
13. Notice how two columns are created to fit the content when more space is available.
14. And it collapses into a single column in lower width screens, making your grid responsive.