为什么我的网拉伸，当我重复的元素？

Question

新的CSS网格和我试图找出一些东西布局。我有4个“新闻”的div，各有一些文字。基本上我想第一个div是一个圆圈，然后放置在第一个div背后的其余3周的div并伸出右侧。

在下面我的代码，我已经做到了这一点，但它伸出的网格，并最终div的。如果您在.news2-4有它上面的评论删除代码，你会看到，电网恢复到正常的。这到底是怎么回事，为什么不电网保持它的形状，当应用这些样式.news2-4？

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.news {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-auto-rows: 200px;
  display: grid;
}

.news1 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 4;
  background: beige;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.news2 {
  grid-column-start: 5;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 3;
  background: purple;
  position: relative;
  z-index: -1;
  /*Would like the div to start and end here*/
  grid-column-start: 3;
  grid-column-end: 8;
}

.news3 {
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  background: aquamarine;
  position: relative;
  z-index: -1;
  /*Would like the div to start and end here*/
  grid-column-start: 3;
  grid-column-end: 9;
}

.news4 {
  grid-column-start: 7;
  grid-column-end: 12;
  grid-row-start: 3;
  grid-row-end: 4;
  background: red;
  position: relative;
  z-index: -1;
  /*Would like the div to start and end here*/
  grid-column-start: 3;
  grid-column-end: 9;
}

<div class="wrapper">
  <section class="news">
    <div class="card news1">
      This is a test
    </div>
    <div class="card news2">
      This is a test
    </div>
    <div class="card news3">
      This is a test
    </div>
    <div class="card news4">
      This is a test
    </div>
  </section>
</div>

Answer 1

看来，你俯瞰CSS网格的基本规则：网格属性只有父母和孩子元素之间的工作。网格容器的后代，超出了孩子，超出范围，将忽略电网的命令。

你已经创建了.wrapper 12列格容器。你似乎是设置在.card项目这个容器中的网格线。除卡项目是.wrapper的孙子。他们将目光.news作为他们的网格容器。

更多细节：

• Grid properties not working on elements inside grid container
• Positioning content of grid items in primary container (subgrid feature)