Question

我开始使用CSS GRID。我的问题是文章文本没有扩展整个div，但只在左侧使用300px左右。我不知道为什么。这可能是因为......这两个值（网格模板行和网格模板列。我不确定你是如何使用它们的。

grid-template-rows：50px 1fr 30px;
grid-template-columns：150px 1fr;

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：没关系。显然。这是一个人为错误。我给了节和div同名。这太尴尬了。

Answer 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/

CSS网格 - 理解文本网格

1 个答案: