CSS 网格 - 理解文本网格答案

【问题标题】：CSS Grid - Understanding the Grid for TextCSS 网格 - 理解文本网格
【发布时间】：2017-12-22 06:20:35
【问题描述】：

我开始使用 CSS GRID。我的问题是文章文本没有扩展整个 div，而在左侧仅使用了 300px 左右。我不知道为什么。可能是因为...这两个值（grid-template-rows 和 grid-template-columns。我不确定您如何使用它们。

网格模板行：50px 1fr 30px;
网格模板列：150px 1fr;

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>

编辑：没关系。显然。这是人为错误。我给 section 和 div 赋予了相同的名称。这太尴尬了。

【问题讨论】：

您将 grid-template-columns 设置为 150px，因此文本仅填充到列的宽度。
解决方案看起来如何@JacobH？
我正在尝试使用 grid-template-rows: 50px 1fr 1fr 7fr;网格模板列：1fr 3fr 1fr； @codepen.io/stephyswe/pen/mwYbyy。 =）。我不确定网格是如何工作的。
嗯，这是一个两部分的问题，您有两个名为article 的区域，因此该样式适用于两者。我会发布一个解决方案。
没问题，星期一还是有点早，我想我们至少要等到星期二才能通过；)

标签： css grid

【解决方案1】：

您有一个名为 article 的部分和 div 正在抛弃您的 css。我更新了您的代码，通过将您的文章 div 重命名为“article2”并在 CSS 中将其引用为 #article2 来解决此问题。

HTML：

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

CSS：

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

https://jsfiddle.net/xzfj4yct/

【讨论】：