Having a little trouble using CSS Grids & mobile

Design help General
1

Hi there:

Link to my project: https://preview.webflow.com/preview/regalities?utm_medium=preview_link&utm_source=designer&utm_content=regalities&preview=ca1dc11cdba93b95acd41dbbf398502f&mode=preview

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.

Thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Peter,

Webflow isn’t autogenerating those columns, this is how CSS works :slight_smile:
I can’t see now what you tried since you moved back to the columns, but generally:
If you have any grid element child, and you give it a ‘Manual’ positioning, it will keep it even if it is outside of your grid definitions.

My best practice with css grid is using almost 100% of the grid’s children in an ‘Auto’ mode. This way these children will follow their parent footsteps no matter what.

If you really need to add a manual positioning to a grid child element, you must re-calibrate it to fit and parent grid changes.

*LMK if you want, we can have a short one on one session and I will help you with this.

3

Hi thank you, Aviv - I figured my issue was stemming from something I didn’t understand. I appreciate your offer of showing me how to do this, but I think I will be fine. I will re-attempt it on my own with the cells set to auto instead of manual.

Thanks again.

1 Like
4

Hi Aviv:

I managed to figure out how it works based on what you said about setting the grid to Auto. I made another grid section and reduced the columns down to one. I also made sure not to change anything from Auto to Manual. I was able to drag and drop my div sections into the grid, and now they are working properly on all screen sizes. Thank you again.

I was throwing my grid off by giving the cells a manual placement because I wanted to control the order. But because I am new to CSS grids I didn’t realize I could just use the navigator to change the order in which the cells automatically appear.

Thank you!

1 Like