Question

CSS Grid的新功能，我正在尝试找出一些布局方面的东西。我有4个“新闻” div，每个div都有一些文字。本质上，我希望第一个div是一个圆，然后将其余3个div定位在第一个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视为自己的网格容器。

更多详细信息：

重叠元素时为什么网格会拉伸？

1 个答案: