2017-11-18 229 views
0

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

出於某種原因,電網區域不正確的結構。可能我忘了一些東西,但我無法弄清楚究竟是什麼。 任何幫助表示讚賞。謝謝!

+0

預期的結果是有放置在按照「併網卡模板區域「參數。例如,卡#1應該在第一行佔據2個列單元,卡#4應該包括第2行和第3行的第一列單元等。 – Nekto

+0

類似這樣的:http://prntscr.com/hc34gn – Nekto

回答

3

剛從grid-area值刪除引號,它會工作得很好:

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

+2

另外, grid-template-columns變得沒用,因爲grid-template-areas接管並且實際上做了網格佈局描述https://codepen.io/anon/pen/qVprPO –

+2

@G-Cyr,實際上是'grid-template-columns'仍然重要並且有所作爲。使用'1fr 1fr 1fr'這些列均勻地分配行中的空間。沒有它,這些列將解析爲「自動」寬度,這會呈現不同的佈局。 –

+1

@Michael_B你是對的! :) –