I want all empty fields in the grid layout to be filled. If there is a space in the line, the element below should be as high as that space. But it doesn't happen because every row has the same height.
Like in this link : https://www.hizliresim.com/fln4rch
My codes :
.news {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: space-between;
row-gap: 20px;
}
.news .news-card {
width: 200px;
display: flex;
flex-direction: column;
margin: 0 auto 0 auto;
cursor: pointer;
}
.news .news-card img {
width: 100%;
}
.news .news-card h4 {
font-weight: 700;
font-size: 21px;
line-height: 120%;
color: #25282e;
}
.news .news-card p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #25282e;
}
<div class="news">
<div class="news-card">
<img src="https://images.unsplash.com/photo-1668005060699-ac779fb861c1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="news">
<h4>Would you still love me if I painted parrots all day? e-publication is out</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1667927797723-ece186807c01?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="news">
<h4>Çiğdem Aky at Kunstmuseum Reutlingen</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1668005060699-ac779fb861c1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="news">
<h4>Would you still love me if I painted parrots all day? e-publication is out</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1667927797723-ece186807c01?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="news">
<h4>Çiğdem Aky at Kunstmuseum Reutlingen</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1668005060699-ac779fb861c1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="news">
<h4>Would you still love me if I painted parrots all day? e-publication is out</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
<div class="news-card">
<img src="https://images.unsplash.com/photo-1667927797723-ece186807c01?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="news">
<h4>Çiğdem Aky at Kunstmuseum Reutlingen</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>