I am encountering a problem with my flexbox setup. It contains multiple products with images and text, but the issue arises when a product has more than one line of text causing the image to be slightly raised compared to others.
Any suggestions on how to resolve this issue?
Here is my code snippet:
<div class='imggrid'>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>Product Title</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>Product Title with More Words</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
<div class='product'>
<img src="assets/images/merch/01.png" alt="The Joiners Tee">
<h3>The Joiners Tee</h3>
</div>
</div>
css
.imggrid {
width: 80vw;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 0 auto;
}
.imggrid img {
margin-bottom: 1.5rem;
}