Equal height of the each product - html

Question

I am using Shopify theme, I am displaying four product in each row. Everything is working perfectly except product column height. I need the equal height of each column. I tried display: tablethe parent class and display:table-cell to child class but still not working. Also tried display:flex
I am sharing the link to code because of my code huge and not allowing me to upload here.
https://jsfiddle.net/a8ag2270/1/
I am getting the output. I need equal height.

Answer 1

Okey, that's the best I can do for now.
https://jsfiddle.net/a8ag2270/49/
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
/* had to target more specifically with (div.grid-view-item) */
/* so the margin: 0px auto 35px; gets overridden */
div.grid-view-item {
display: flex;
flex-direction: column;
height: 100%;
margin: 0; /* instead of margin: 0px auto 35px; */
}
.grid-view-item__link.grid-view-item__image-container {
display: flex;
flex-direction: column;
flex: 1;
}
/* same story here */
div.grid-view-item__meta {
margin-top: auto; /* override margin-top: 8px; */
}
It can probably be done with a lot fewer styles (or maybe not), but I like flexboxes and working with them, so I used that.
What you need to do on your own is to set min-height to title, description etc. if you want them to be "aligned horizontally" (can't find the right words for that) with each other.
The above styles put the price down, right above the button. If you don't want that behaviour, you can use this:
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
div.grid-view-item {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
.grid-view-item__link.grid-view-item__image-container {
flex: 1;
}
or this:
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
.grid__item {
display: flex;
}
div.grid-view-item {
display: flex;
flex-direction: column;
}
.grid-view-item__link.grid-view-item__image-container {
flex: 1;
}

Answer 2

add Below code in your css file:
#Collection > .grid--view-items
{
display: flex;
flex-flow: row wrap;
}
#Collection .grid__item
{
display: flex;
}
#Collection .grid-view-item
{
display: flex;
flex-direction: column;
}
#Collection a.grid-view-item__link.grid-view-item__image-container
{ flex: 1 0 0; }

Answer 3

Just add a style to the grid-view-item__link like
.grid-view-item__link{
height:400px;
}
Change the 400 to whatever height you want.
Here is the fiddle