Making products fit into a grid

[ascended]

Hello, I have made a grid using CSS but cannot find a way to fit each of my products into the separate containers. Originally my products look like the second photo, and I would like for it to look like this, but instead have it inside the layout of the grid I created (using up all the extra space). How do I go about doing this? Thanks!

Store link:https://ctrl7.com/collections/all
Password:first

Page: shop all

 

 

 

 

[PaulNewton · Accepted solution]

You have a grid within a grid with a product-grid that is not a grid but a flexbox then with grid__item(s) that aren't grids but flexbox.

Fix every step along the chain to be sane:

.product-grid-container > .collection > #product-grid > .grid__item