Question

我想显示一个满是活动卡的css-grid。但是，我发现如果css-grid的一行中没有非活动卡片元素，则该元素不会正确显示：这些行重叠，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，我现在知道该怎么做，答案是设置一个以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>

仅限Flipcards的CSS网格无法正确显示

编辑：

1 个答案: