I have the issues that if there are titles in each column with different lenghts so they occupy multiple lines, the ones with less lines will be centered to the space instead of starting at top right after the image. Also why is there gap under the img inside .image?
body{margin:0;}
.grid{display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px;}
.item{border:1px solid black; flex-wrap:wrap; display:flex;}
.item .image{display:block;}
.item .image img{max-width:100%; height:auto; object-fit:contain;}
.item .title{width:100%;}
.item .price{font-weight:bold; width:50%; align-self: flex-end;}
.item .buy{width:50%; text-align:right; align-self: flex-end;} <div class="grid">
<div class="item">
<div class="image">
<img src="https://cdn.britannica.com/39/7139-050-A88818BB/Himalayan-chocolate-point.jpg" />
</div>
<h2 class="title">
Title of
</h2>
<div class="price">
12.99€
</div>
<div class="buy">
<span class="btn">Buy now</span>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://cdn.britannica.com/39/7139-050-A88818BB/Himalayan-chocolate-point.jpg" />
</div>
<h2 class="title">
Title of this product lol rttdgf 56 hgfhfgh
</h2>
<div class="price">
12.99€
</div>
<div class="buy">
<span class="btn">Buy now</span>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://cdn.britannica.com/39/7139-050-A88818BB/Himalayan-chocolate-point.jpg" />
</div>
<h2 class="title">
Title of this product lol
</h2>
<div class="price">
12.99€
</div>
<div class="buy">
<span class="btn">Buy now</span>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://cdn.britannica.com/39/7139-050-A88818BB/Himalayan-chocolate-point.jpg" />
</div>
<h2 class="title">
Title of this product lol
</h2>
<div class="price">
12.99€
</div>
<div class="buy">
<span class="btn">Buy now</span>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://cdn.britannica.com/39/7139-050-A88818BB/Himalayan-chocolate-point.jpg" />
</div>
<h2 class="title">
Title of this product lol lorem ipsum dolor sit amet
</h2>
<div class="price">
12.99€
</div>
<div class="buy">
<span class="btn">Buy now</span>
</div>
</div>
</div>
I want to achieve that all images are same height with no gap at bottom, and that title occupy all space and the text starts right after image at the bottom.
CodePudding user response：
try experimenting with title:
.item{
border:1px solid black;
flex-wrap:wrap;
display:flex;
flex-direction: column;
}
.item .title{
width:100%;
flex-grow:.5;
margin-bottom: auto;
}
CodePudding user response：
For a quick solution is change display: flex to display: grid in the .item class. And remove completely potential empty spaces add to the body padding: 0;