This is not possible at present (2019/06)* with any CSS layout method.
display:subgrid
solves the issue but it has limited non-experimental adoption by browsers as yet.*
*[2019/12 Update] – Subgrid is now shipped in Firefox 71
—
It is enabled, by default, in Firefox 71+ so it is possible to test. Until this is fully adopted Javacript is needed to equalise element heights.
A couple of resources links from Rachel Andrew (a CSS-Grid envangalist)
and
-
YouTube video on subgrid
* { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing:inherit; }
.Grid {
display: grid;
width:90%;
margin:auto;
grid-gap: 10px;
grid-template-columns: repeat( auto-fill, 280px);
}
.loon-card {
display:grid;
grid-row: span 5; /* as we have 5 card components in each card */
grid-template-rows:subgrid;
border: 1px solid #ddd;
padding: 10px;
}
.long-description {
border-top: 1px solid #ddd;
}
.price {
padding:.5em;
text-align:center;
}
img {
max-width:100%;
display: block;
}
<div class="Grid">
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class="price">12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
<br/>Title:5
<br/>Title:6
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class="price">12.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class="price">14.00$</div>
<button>buy</button>
</div>
<div class="loon-card">
<img src="http://www.fillmurray.com/300/200">
<div class="short-description">
Title:1
<br/>Title:2
<br/>Title:3
<br/>Title:4
</div>
<div class="long-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
</div>
<div class="price">15.00$</div>
<button>buy</button>
</div>
</div>
Resulting output (FF Nightly)