CSS网格-可重复模板区域

Question

我有兴趣CSS Grid具有创建可重复的grid-template-areas的功能吗？

为了解释我创建的代码笔示例的功能，https://codepen.io/vadjs_ru/pen/qBBJxLX

如您在示例中看到的，grid-template-areas属性包含多个重复。 .item元素可能具有无限数，因此，无限grid-template-areas是不可接受的。

我知道这里的解决方案将是.item的嵌套网格，但是我实际上对在单个网格中实现此解决方案感兴趣，例如概念验证。

Answer 1

您可以如下组合网格和定位：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-right:7rem;
  grid-gap: 1rem;
  position:relative;
}
.item {
  background: #add8e6;
  padding: 1rem;
}
.button {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:6rem;
  background: #ffc0cb;
  padding: 1rem;
  box-sizing:border-box;
}

<div class="grid">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="button">Button</div>
</div>