Automatically take the biggest height CSS stylus - css

Question

simple problem, sometime i have more content in card (make it bigger), and i want the one that is smaller to take automatically the height of the bigger one.
You can see explicitly what i mean on the picture attached.
I'm using quasar (vuejs framework) and stylus
Here is my code for the css of the box :
<style lang="stylus" scoped>
.q-card {
margin: 10px;
width : auto;
img {
height : 150px;
}
}
</style>
UPDATE
And the html concerned :
<ais-results :stack="true" class="row">
<template slot-scope="{ result }">
<div class="col-md-3 col-xs-6">
<q-card>
<q-card-media>
<img :src="result.picture">
</q-card-media>
<q-card-title>
{{result.name_event}}
<q-rating slot="subtitle" :max="5" />
<div slot="right" class="row items-center">
<q-icon name="place" /> 250 ft
</div>
</q-card-title>
<q-card-main>
<p v-if="result.place.location" style="color:#48C8B8">
<q-icon name="place" />{{result.place.name}}, {{result.place.location.city}}
</p>
<p class="text-faded">{{result.start_time}}</p>
</q-card-main>
<q-card-separator />
<q-card-actions>
<q-btn flat round dense icon="event" />
<q-btn flat color="primary" label="Reserve" />
</q-card-actions>
</q-card>
</div>
</template>
</ais-results>
Thanks in advance to the community !

Answer 1

Just use a simple CSS grid:
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.q-card {
background-color: #f8f8f8;
box-shadow: 0 0 3px #666;
text-align: center;
}
.q-card img {
max-width: 100%;
}
<div class="grid-container">
<div class="q-card">1 <br />1.1<br />1.1.1</div>
<div class="q-card">2</div>
<div class="q-card">3
<img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
3.1
</div>
<div class="q-card">4</div>
</div>
All grid items will automatically have equal height on a per-row basis, which seems to be exactly what you are looking for.
If you need fixed-width columns, there you go:
grid-template-columns: repeat(2, 500px);