小编Nek*_*kto的帖子

有人可以帮我弄清楚为什么以下CSS Grid示例无法按预期工作吗？这是Codepen的链接：

.cards {
  margin: 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "a a b"
    "c d d"
    "c e e";
}

.card {
  background-color: #1E88E5;
  padding: 2em;
  color: #FFFFFF;
  line-height: 1.4;
  border-radius: 4px;
}

.card1 { grid-area: "a"; }
.card2 { grid-area: "b"; background-color: #4CAF50; }
.card3 { grid-area: "c"; background-color: #FFCA28; }
.card4 { grid-area: "d"; background-color: #F06292; }
.card5 { grid-area: "e"; background-color: #FF8A80; }

由于某种原因，网格区域的结构不正确。可能我忘记了一些东西，但我无法弄清楚到底是什么。任何帮助表示赞赏。谢谢！