Yet another grid question. I’ve seen plenty here, but can’t find a proper answer.
Let’s say you have a 3x3 grid, filled with images, as desktop size layout. Is it possible to make this, say, a 2x2 grid on a tablet and a 1x1 grid on mobile?
I’ve seen that I can delete a column or row in the grid, but it doesn’t seem to result in having less images shown. How do I achieve this?
You would edit the grid at the specific breakpoint:
As far as it displaying less images, did you still want to feature the images on scroll? You could add some margin to push the down the image on the corresponding breakpoints. If you want it removed you can set it to hide at that breakpoint.
The breakpoints are the dotted lines in your example? How do I get to those and edit?
I know I can right click on the header of the grid when editing, and choose the delete a column or row, but I still remain seeing the original structure of 3x3 cells and all pictures are still shown when viewing the page.
@Fry ~ My example was bad. I must say, this ones an odd one. I’m still learning and try to help where I can, but we may need someone that’s leveled up.
On my end when I change from a 3 column to a 2 column it collapses and works properly. I don’t even know how to get that white column header in your example.
When I say it works on my end, I mean when I create my own example. When I load your site it’s the same issue you’re having. I just wanted to make that clear.
FYI: It’s turning white after deleting a column or row. When you edit the grid, you can right click on of the (red) column heads or rows and then choose “delete column” or “delete row”. It will then grey out like that.
That shouldn’t matter. Setting a content on manual allows it to be moved to a specific grid cell. When set to Auto, the grid automatically adds the content in the first free cell.
I’ve found exactly what I want to achieve. It’s shown in the breakpoints tutorial. Here a 3x3 grid is modified to a smaller grid per smaller breakpoint. In the vid you see grid columns and rows immediately disappear when being being removed. I don’t get it why mine remain visible.
@Fry ~ Did you not want the smaller breakpoints to include the overflowed images? You could try hiding the images you don’t want to be included on those breakpoints under “Layout”. You need to add a subclass to them as well so it doesn’t hide the whole class.
FYI, I don’t work for Webflow, but I love helping where I can. I’m still learning and making mistakes. lol. Webflow is a complicated and super fun playground. It’s saving me through this pandemic.
@Fry I was having the same issue and came across this page – I found that switching the display from ‘grid’ to ‘inline’ at the smaller screen size let me delete the column successfully like in the video shared above
