CSS Grid - repeatable template areas

Question

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>

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.

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.

Essentially this - https://stackoverflow.com/questions/44052336/make-a-grid-item-span-to-the-last-row-column — Paulie_D, Nov 14 '19 at 12:58
I'm interested is there way to do it. It's not proposal/feature request/etc. It's not for discussion. At least on StackOverflow. — vadjs, Nov 14 '19 at 13:01
It's too broad as a question since what you want is not supported. — Paulie_D, Nov 14 '19 at 13:03
Link that you attached looks like solution that i requested. It's too verbose and have problems (try to add `grid-row-gap` property). But if here are will be no better solutions, i will mark it as best. — vadjs, Nov 14 '19 at 13:19
Possible duplicate of [Make a grid item span to the last row / column](https://stackoverflow.com/questions/44052336/make-a-grid-item-span-to-the-last-row-column) — Ori Drori, Nov 14 '19 at 16:35

score 2 · Answer 1 · answered Nov 14 '19 at 13:22

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>

I though that i missed some features in grid documentation. Looks like grids lacks of this feature. Probably nested grid is the best solution in described case. Anyways, thank you for your answer. — vadjs, Nov 14 '19 at 15:17

CSS Grid - repeatable template areas

1 Answers1

Linked