CSS網格 - 瞭解文本網格

我開始使用CSS網格。我的問題是，文章文本不擴展整個div，但只在左側使用300px左右。我不知道爲什麼。這可能是因爲...這兩個值（grid-template-rows和grid-template-columns。我不知道你是如何使用它們的。模板列：150像素1FR;CSS網格 - 瞭解文本網格

Codepen：。https://codepen.io/stephyswe/pen/mwYbyy

#article { 
 
    display: grid; 
 
    width: 100%; 
 
    height: 250px; 
 
    grid-template-areas: "head head head" 
 
         "desc desc desc" 
 
         "jour-pic jour-name jour-name" 
 
         "star article extra"; 
 
    grid-template-rows: 50px 1fr 30px; 
 
    grid-template-columns: 150px 1fr; 
 
} 
 

 
#article > #headline { 
 
    grid-area: head; 
 
    background-color: #8ca0ff; 
 
} 
 

 
#article > #description { 
 
    grid-area: desc; 
 
    background-color: #ffa08c; 
 
} 
 

 
#article > #jour-pic { 
 
    grid-area: jour-pic; 
 
    background-color: #afa08c; 
 
} 
 

 
#article > #jour-name { 
 
    grid-area: jour-name; 
 
    background-color: #ffff64; 
 
} 
 

 
#article > #star { 
 
    grid-area: star; 
 
    background-color: #ffff64; 
 
} 
 

 
#article > #article { 
 
    grid-area: article; 
 
    background-color: red; 
 
} 
 

 
#article > #extra { 
 
    grid-area: extra; 
 
    background-color: blue; 
 
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas --> 
 

 
<section id="article"> 
 
    <div id="headline">headline</div> 
 
    <div id="description">description</div> 
 
    <div id="jour-pic">journalist pic</div> 
 
    <div id="jour-pic">journalist pic</div> 
 
    <div id="jour-name">journalist textjournalist textjournalist textjournalist textjournalist textjournalist textjournalist textjournalist textjournalist text</div> 
 
    <div id="star">star</div> 
 
    <div id="article">article text article text article text article text article textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle textarticle text</div> 
 
    <div id="extra">extra stuff</div> 
 
</section>

編輯：沒關係顯然，這是一種人爲的錯誤給我的S ection和div同名。太尷尬了。

來源

2017-07-17 Doe. J

你有你的網格模板列設置爲150像素，使文本僅填充到列的寬度。 –

解決方案如何查看@JacobH？ –

我正在嘗試使用 grid-template-rows：50px 1fr 1fr 7fr; grid-template-columns：1fr 3fr 1fr; @ https://codepen.io/stephyswe/pen/mwYbyy。 =）。我不知道網格是如何工作的。 –

你有一個部分和div都命名article這是扔掉你的CSS。我更新了代碼，通過將文章div重命名爲「article2」並在CSS中將其引用爲＃article2來修復此問題。

HTML：

<div id="article2">...</div>

CSS：

#article > #article2 { 
    grid-area: article; 
    background-color: red; 
}

https://jsfiddle.net/xzfj4yct/

來源

2017-07-17 16:17:11

CSS網格 - 瞭解文本網格

回答

相關問題