CSS: определение высоты flip card в grid автоматически без js

Question

Я хотел бы отобразить две флип-карты подряд с помощью grid.
Каждая из переворачиваемых карточек должна содержать изображение в квадрате на лицевой стороне и некоторый текст на оборотной стороне.
Как я могу добиться отсутствия необходимости указывать какую-либо высоту в классе css .flip-card?
Я хотел бы, чтобы флип-карта автоматически настраивала свою высоту в соответствии с шириной изображения, которая сама зависит от общего пространства, доступного в grid (и, следовательно, изменяется от устройства к устройству). На данный момент мне нужно жестко указать высоту, чтобы она работала. Но это неизбежно приводит к тому, что флип-карта становится не квадратом, а прямоугольником.
Как добиться этого?

Здесь мой код:

.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>

_{Свободный перевод вопроса CSS: Determine height of flip card in grid automatically without js от участника @Jonathan Rhein.}

Answer 1

Не используйте для этого position: absolute. Положитесь на grid CSS и сделайте переднюю и заднюю часть карты в одной и той же области, чтобы они перекрывали друг друга, оставаясь в элементе потока, чтобы область была определена с наибольшей высотой:

.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>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

CSS: определение высоты flip card в grid автоматически без js

Ответы (1 шт):