CSS网格-可重复的模板区域 [英] CSS Grid - repeatable template areas

问题描述

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

I'm interested does CSS Grid has feature to create repeatable grid-template-areas?

到解释我创建此示例的功能，

To explain the feature i created this example,

.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 是不可接受的。

As you can see in example, grid-template-areas property contains several repeats. The .item elements has potentially infinite number, so, infinite grid-template-areas is not acceptable.

我知道这里的解决方案是 .item 的嵌套网格，但是我实际上对实现

I know the solution when here are will be nested grid of .item's but I'm actually interested in implementation of this solution in single grid, like proof of concept.

推荐答案

您可以像下面这样组合网格和定位：

You can combine grid and positionning like below:

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

这篇关于CSS网格-可重复的模板区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！