Automatically take the biggest height CSS stylus

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 }">


{{result.name_event}}

250 ft

</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 !

are you open to a JavaScript solution?
– bomz
Jun 29 at 9:05

use flex, you can get equal height boxes per row
– Pete
Jun 29 at 9:05

Possible duplicate of How do I keep two side-by-side divs the same height?
– musefan
Jun 29 at 9:10

No comment on the only answer you got. Sad story.
– connexo
Jun 29 at 10:04

You are not showing the HTML. You are showing the template (which is used to generate the actual HTML). The template won't help others help you.
– connexo
2 days ago

1 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%;
}

1
1.1
1.1.1

2

3

3.1

4

</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);


this is not working unfortunately :/
– Raphael ABADIE-MOREAU
2 days ago

"this is not working" is not a helpful comment. What exactly is not working?
– connexo
2 days ago

If i could i would put a screenshot (more explicit) but it strech everything thin and destroy how things are shown
– Raphael ABADIE-MOREAU
2 days ago

Ofc to get a responsive solution you will need to define different grids using media queries.
– connexo
2 days ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.