Flipcards-only css-grid doesn't display properly

Question

I would like to display a css-grid which is full of flipcards. However, I found that if there isn't a non-flipcard element in a row of the css-grid, then it doesn't display properly: the rows overlap, the background-color isn't taken into account and the back side of the flipcard doesn't appear.

I think that the problem isn't linked with whichever version I use, for I also tested the following code in codepen.io and the problem is still there.

Here is my html:

<section class="grid-1">
  <div class="flip-container item1">
    <div class="flipper">
      <div class="front">
        1 front
      </div>
      <div class="back">
        1 back
      </div>
    </div>
  </div>
  <div class="flip-container item2">
    <div class="flipper">
      <div class="front">
        2 front
      </div>
      <div class="back">
        2 back
      </div>
    </div>
  </div>
  <div class="flip-container item3">
    <div class="flipper">
      <div class="front">
        3 front
      </div>
      <div class="back">
        3 back
      </div>
    </div>
  </div>
</section>

And here is my css:

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  padding-left: 20%;
    padding-right: 20%;
    width: 60%;
  
  grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-row-gap: 0.5%;
  grid-template-areas: "item1 item2"
                        "item3 .";
}

.grid-1 div {
  color: white;
  font-size: 20px;
  width: 100%;
  height: 100%;
}

.item1{
  grid-area: item1;
}

.item2{
  grid-area:item2;
}

.item3{
  grid-area: item3;
}

.flip-container {
  background-color: transparent;
}

.flipper {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background-color: #bbb;
  color: black !important;
}

.back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

If the item1 or item2 is a simple div instead of a flip-container, then it all goes back to normal, the two rows don't overlap, the background-color is taken into account and the back side of the flipcard appears.

I would like to know where the problem lies, I'm quite a newbie css-wise so I don't really know where I should start to search.

Edit:

Thanks to Paulie_D, I now know how to do it, the answer is to set a height in px. However, I would also like to have a responsive grid, in which I will put images. How can I set a responsive height for element?

Answer 1

You have to give the elements a height...as the original 100% will not translate until the parent has a defined height.

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  padding-left: 20%;
  padding-right: 20%;
  width: 60%;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-row-gap: 0.5%;
  grid-template-areas: "item1 item2" "item3 .";
}

.grid-1 div {
  color: white;
  font-size: 20px;
  width: 100%;
  height: 100px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.flip-container {
  background-color: transparent;
}

.flipper {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background-color: #bbb;
  color: black !important;
}

.back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<section class="grid-1">
  <div class="flip-container item1">
    <div class="flipper">
      <div class="front">
        1 front
      </div>
      <div class="back">
        1 back
      </div>
    </div>
  </div>
  <div class="flip-container item2">
    <div class="flipper">
      <div class="front">
        2 front
      </div>
      <div class="back">
        2 back
      </div>
    </div>
  </div>
  <div class="flip-container item3">
    <div class="flipper">
      <div class="front">
        3 front
      </div>
      <div class="back">
        3 back
      </div>
    </div>
  </div>
</section>