Flipcards-only css-grid doesn't display properly - html

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>