CSS Grid – Make Sibling Container Equal Heights?

Is it possible to make the .title div equal heights with CSS Grid? The text will be of variable length and needs to be shown in full ( no overflow hidden) but I cant work out if its possible to make the title divs equal height with CSS Grid?

CSS:

“`
.container {
max-width: 120rem;
margin: 0 auto;
padding: 1rem;
}
.row {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(1, 1fr); /* mobile screens – single column */
grid-auto-rows: auto;
}
.box {
color: #fff;
font-family: “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, “DejaVu Sans Condensed”, Helvetica, Arial, “sans-serif”;
font-size: 1.2rem;
text-align: center;
}
.title {
border-radius: 0.75rem 0.75rem 0 0;
}
.title, .price {
background-color: #22275B;
padding: 0.75rem;
}
.image {
border: 2px solid #22275B;
}
.image img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
}
.saving {
background-color: #A81E22;
padding: 0.75rem;
border-radius: 0 0 0.75rem 0.75rem;
}
@media only screen and (min-width: 660px) { /* tablets portrait */

.row {
grid-template-columns: repeat(2, 1fr); /* tablet portrait – 2 columns */
}
}
@media only screen and (min-width: 900px) { /* tablets landscape */

.row {
grid-template-columns: repeat(3, 1fr); /* tablet landscape – 3 columns */
}
}
@media only screen and (min-width: 900px) { /* tablets landscape */

.row {
grid-template-columns: repeat(3, 1fr); /* tablet landscape – 3 columns*/
}
}
@media only screen and (min-width: 1200px) { /* desktops */

.row {
grid-template-columns: repeat(4, 1fr); /* desktops – 4 columns */
}
}
“`

HTML:

“`
<div class=”container”>
<div class=”row”>
<div class=”box”>
<div class=”title”>Here Is A Very Very Very Very Very Very Very Very Very Very Very Very v v Very Very Very Very Very Very v Very Very Very Very Very Very Very Very Very Very Looong Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
<div class=”box”>
<div class=”title”>Here Is A Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
<div class=”box”>
<div class=”title”>Here Is A Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
<div class=”box”>
<div class=”title”>Here Is A Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
<div class=”box”>
<div class=”title”>Here Is A Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
<div class=”box”>
<div class=”title”>Here Is A Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
<div class=”box”>
<div class=”title”>Here Is A Title</div>
<div class=”image”><img src=”//placehold.it/5000×3000″ width=”500″ height=”300″ alt=”” />
</div>
<div class=”price”>PRICE £999.00</div>
<div class=”saving”> SAVE £99.00 OFF RRP</div>
</div>
</div>
</div>“`

Also in #CSS _↴