有人能帮我弄清楚为什么下面的CSS网格示例不能按预期工作?这里有一个链接到Codepen:CSS网格不能按预期工作
https://codepen.io/Nekto/pen/yPpaBE
.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; }
出于某种原因,电网区域不正确的结构。可能我忘了一些东西,但我无法弄清楚究竟是什么。 任何帮助表示赞赏。谢谢!
预期的结果是有放置在按照“并网卡模板区域“参数。例如,卡#1应该在第一行占据2个列单元,卡#4应该包括第2行和第3行的第一列单元等。 – Nekto
类似这样的:http://prntscr.com/hc34gn – Nekto