CSS: Determine height of flip card in grid automatically without js

Question

I would like to display two flip cards in a row using grid. Each of the flip cards shall contain a squared image on the front and some text on the back. How can I achieve not having to specify any height within the .flip-card css class? I would like the flip card to automatically adjust its height to the width of the image which itself is dependent on the overall space available within the grid (and therefore changes from device to device). At the moment I have to hardcode the height to make it work. But this inevitably leads the flip card not to be squared but to be a rectangle. Any ideas?

This is my code:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.flip-card {
    position: relative;
    background-color: transparent;
    width: 100%;
    height: 200px; /* This value should not be hard coded, but be set according to the width of the image which is determined by the grid. It should make the flip card a perfect square*/
    overflow: hidden;
    perspective: 1000px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front { 
      background-color: transparent;
  }
  
  .flip-card-back {
    background-color: red;
    transform: rotateY(180deg);
  }

<div class="grid-container">
  
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>
  
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

</div>

Temani Afif Temani Afif · Accepted Answer · 2021-06-03T21:27:02

Don't use position:absolute to achieve this. Rely on CSS grid and make both the front and the back of the card on the same area so they overlap while still being in flow element so the area will be defined with the biggest height:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.flip-card {
  overflow: hidden;
  perspective: 1000px;
}

.flip-card-inner {
  display: grid; /* here */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  grid-area: 1/1; /*and here */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  background-color: red;
  transform: rotateY(180deg);
}

img {
  max-width: 100%
}

<div class="grid-container">

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

</div>

CSS: Determine height of flip card in grid automatically without js

1 Answers