Edit 2: I gave up. I spent 2 hours trying to figure it out watching videos and reading guides. I just went back to using a regular grid and displayed everything in a single column for tablet>mobile. But I’d still like to know how you can force the CSS Grids block to display one single column. I don’t understand why Webflow would auto generate a column that I do not need.
Edit: Ok, I’ve figured out that for some reason the CSS grid is automatically generating a column by default and this is causing the extra column to appear. How to I turn off this extra column?
I am not using the CMS to populate the items on this grid.
I have a section of my home page dedicated to jewelry categories. The categories are to be displayed in 3 columns by n rows. I would like to make this grid scale down to 1 column for phones.
I created the grid by making a div block of 1200 PX called “home-category-section.” Within that div block I added another div block called “home category grid” (which is my css grid). Inside of my grid cells I created individual div sections that contain one single image and one single button.
I got the grid to scale down from 3 columns to 2 columns by going to the tablet view > edit grid > and deleted all but one of the columns and setting the remaining column to min/max 300px, 1FR, and checked the Auto-Fit button. However, on mobile the right section of the grid goes off the screen. I’m not sure why this is happening because the transition from 3>2 worked for desktop>tablet, but I can’t seem to recreate the effect for tablet>phone.
If someone could explain to me which setting I am getting wrong I would appreciate it.