仅翻转卡的 css 网格无法正确显示

Question

我想显示一个充满翻转卡的css网格。但是，我发现如果 css-grid 的一行中没有非翻转卡元素，那么它就无法正确显示：行重叠，不考虑background-color，并且翻转卡的背面没有出现。

我认为问题与我使用的任何版本都没有联系，因为我也在 codepen.io 中测试了以下代码，问题仍然存在。

这是我的网页：

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

这是我的 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);
}

如果item1或item2是一个简单的div而不是flip-container，那么一切都会恢复正常，两行不重叠，background-color被考虑在内，并且出现翻转卡的背面。

我想知道问题出在哪里，我是一个新手 css，所以我真的不知道我应该从哪里开始搜索。

编辑：

多亏了Paulie_D，我现在知道该怎么做，答案是以 px 为单位设置高度。但是，我也想要一个响应式网格，我将在其中放置图像。如何为element设置响应高度？

Answer 1

你必须给元素一个高度...因为原始100%在父级具有定义的高度之前不会转换。

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>