有人能幫我弄清楚爲什麼下面的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