css - 避免重叠具有相同网格区域的元素

Question

如果有一个 hack 可以在堆栈中启用具有相同网格区域属性的渲染元素，那就太棒了。我知道 css-grid 的默认功能是重叠它们，我只是在寻找 hack。

例如:

<div class="grid">
  <div class="header">header</div>
  <div class="paragraph">p1</div>
  <div class="paragraph">p2</div>
  <div class="paragraph">p3</div>
  <div class="paragraph">p4</div>
  <div class="footer">footer</div>
</div>

我正在寻找一种解决方案:
1. 不会使用嵌套。即，将所有段落包装到另一个 div 中，并将该 div 指向网格区域
2. 不会​​增加 grid-area-rows 并且不需要将每个元素指向一个新的 grid-area

这可能吗？

这里的例子: https://codepen.io/stavros-liaskos/pen/WPdLoJ?editors=1100

Answer 1

我在这里更改了您的代码，可能会有所帮助

Codepen

.grid {
  display: grid;
  grid-template-columns:  1fr,1fr;
}

.header {
  grid-column: 1/4;
  background: red;
}

.paragraph {
  grid-column: 1/3;
  background: yellow;
}

.slider {
  grid-column: 3/4;
  background: gray;
}

.footer {
  grid-column: 1/4;
  background: green;
}