Automatically take the biggest height CSS stylus

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 !

Possible duplicate of [How do I keep two side-by-side divs the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height) — musefan, Jun 29 '18 at 09:10
**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, Jun 29 '18 at 15:16

connexo · Answer 1 · 2018-06-29T09:26:00.170

0

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

edited Jun 29 '18 at 09:26

answered Jun 29 '18 at 09:13

connexo

53,704
14
91
128

"this is not working" is not a helpful comment. **What exactly** is not working? – connexo Jun 29 '18 at 14:24
If i could i would put a screenshot (more explicit) but it strech everything thin and destroy how things are shown – foufrix Jun 29 '18 at 14:27
Ofc to get a responsive solution you will need to define different grids using media queries. – connexo Jun 29 '18 at 14:31

Automatically take the biggest height CSS stylus

1 Answers1