html - 仅限 Flipcards 的 css-grid 无法正确显示

Question

我想显示一个充满 Binder 的 css-grid。但是，我发现如果 css-grid 的一行中没有非 flipcard 元素，则它无法正确显示:行重叠，background-color 不是考虑在内，事件卡片的背面没有出现。

我认为问题与我使用的版本无关，因为我还在codepen.io中测试了以下代码，问题仍然存在。

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

这是我的 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，我现在知道怎么做了，答案是以像素为单位设置高度。但是，我也想要一个响应式网格，我将在其中放置图像。如何为 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>