CSS Grid centering issue (producting landing page)

Hi all,

I’ve been working on my product landing page:

https://codepen.io/duvallpj/pen/KBrpOR

Various elements are not yet in place and it’s possibly a bit more complex than it needs to be! I’ve hit a small issue but its bugging the hell out of me; the ‘sock trial’ section uses CSS Grid the line up and centre the three main elements. When I apply a new font (to the

tags), it seems to break it and results in the elements left-aligning instead of being centred.

Any ideas why changing a font would result in this? And how can I fix it?

Thanks in advance!

Its because depending on font, your #trialItems grid may accommodate more then 3 <div class='trialItem'> on the page the last one being empty.

The problem is your grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
To see what i mean just change it to grid-template-columns: repeat(3, 1fr);

1 Like

Thanks for replying, @sorinr! I’m not quite sure I follow - don’t really understand why changing the font would mean the grid would contain more of the

I tried changing it to grid-template-columns: repeat(3, 1fr); and that sorted it, though it now not responsive for smaller view screens. Should I incorporate a media query or is there another solution?

Really appreciate your input!

Just read this to better understand what auto-fill is doing.
So, in your case, by changing auto-fill with auto-fit will do the trick.

1 Like

Ah that’s awesome! Annoyingly, I remember a tutorial telling me that if auto-fill didn’t work, just try auto-fit!

Appreciate you taking the time to respond - thanks again.

You are very welcome.