CSS Grid - 可重复的模板区域答案

【问题标题】：CSS Grid - repeatable template areasCSS Grid - 可重复的模板区域
【发布时间】：2019-11-14 12:39:00
【问题描述】：

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

为了解释我在这个例子中创建的特性，

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 6rem;
  grid-template-areas:
    '. . . button'
    '. . . button'
    '. . . button'
    '. . . button';
  grid-gap: 1rem;
}
.item {
  background: #add8e6;
  padding: 1rem;
}
.button {
  grid-area: button;
  background: #ffc0cb;
  padding: 1rem;
}

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

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

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

【问题讨论】：

基本上是这个 - stackoverflow.com/questions/44052336/…
我很感兴趣有没有办法做到这一点。这不是提案/功能请求/等。不是用来讨论的。至少在 StackOverflow 上。
这个问题太宽泛了，因为不支持你想要的。
您附加的链接看起来像我要求的解决方案。它太冗长并且有问题（尝试添加grid-row-gap属性）。但如果这里没有更好的解决方案，我会将其标记为最佳。
Make a grid item span to the last row / column的可能重复

标签： css css-grid

【解决方案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>

【讨论】：

我虽然错过了网格文档中的一些功能。看起来网格缺少此功能。在所描述的情况下，嵌套网格可能是最好的解决方案。不管怎样，谢谢你的回答。