CSS-Grid funktioniert nicht wie erwartet

Question

Könnte mir jemand helfen, herauszufinden, warum das folgende Beispiel von CSS-Grid nicht wie erwartet funktioniert? Hier ist ein Link in Codepen:

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; } 

Aus irgendeinem Grund Rasterflächen sind nicht richtig strukturiert. Wahrscheinlich habe ich etwas vergessen, aber ich konnte nicht genau herausfinden was. Jede Hilfe wird geschätzt. Vielen Dank!

Answer 1

entfernen Sie die Anführungszeichen aus den grid-area Werte und es wird gut funktionieren:

.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; } 

body { 
 
    text-align: center; 
 
} 
 

 
.wrap { 
 
    max-width: 70em; 
 
    text-align: left; 
 
    margin: 0 auto; 
 
} 
 

 
.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; 
 
    
 
    h3 { 
 
    margin-top: 0; 
 
    } 
 
} 
 

 
.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; }

<div class="wrap"> 
 
    <div class="cards"> 
 
    <div class="card card1"><h3>Card 1</h3>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</div> 
 
    <div class="card card2"><h3>Card 2</h3>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</div> 
 
    <div class="card card3"><h3>Card 3</h3>At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.</div> 
 
    <div class="card card4"><h3>Card 4</h3>Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.</div> 
 
    <div class="card card5"><h3>Card 5</h3>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination.</div> 
 
    </div> 
 
</div>