CSS Grid

CSS Grid - 可重复的网格模板区域(CSS Grid - repeatable grid-template-areas)

假设我们有一个包含7个项目的新闻条目列表。

我用CSS Grid创建了一个模式，它应该在6个项目之后重复。

@supports (display: grid) { .list { display: grid; grid-gap: 25px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-template-areas: "bigLeft bigLeft right1 right2" "bigLeft bigLeft bigRight bigRight" "left1 left2 bigRight bigRight"; } .item:nth-of-type(6n+1) { grid-area: bigLeft; } .item:nth-of-type(6n+2) { grid-area: right1; } .item:nth-of-type(6n+3) { grid-area: right2; } .item:nth-of-type(6n+4) { grid-area: left1; } .item:nth-of-type(6n+5) { grid-area: left2; } .item:nth-of-type(6n+6) { grid-area: bigRight; } }

所需的grid-template-areas模式：

现在我希望这个模式重复并重复添加到列表中的更多项目。 但是，你可以看到，只要添加第7个项目，模式就不会继续，而是被替换。

我也试过这个没有命名的区域

.item:nth-of-type(6n+1) { grid-column: 1 / 3; grid-row: 1 / 3; } .item:nth-of-type(6n+2) { grid-column: 3 / 4; grid-row: 1 / 2; } .item:nth-of-type(6n+3) { grid-column: 4 / 5; grid-row: 1 / 2; } .item:nth-of-type(6n+4) { grid-column: 1 / 2; grid-row: 3 / 4; } .item:nth-of-type(6n+5) { grid-column: 2 / 3; grid-row: 3 / 4; } .item:nth-of-type(6n+6) { grid-column: 3 / 5; grid-row: 2 / 4; }

但同样的结果......

我没有在规范中找到任何解决方案来实现“可重复的网格模板区域”

你有没有人有想法？

Let's say we have a list of news entries with 7 items.

I've created a pattern with CSS Grid that that should repeat itself after 6 items.

@supports (display: grid) { .list { display: grid; grid-gap: 25px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-template-areas: "bigLeft bigLeft right1 right2" "bigLeft bigLeft bigRight bigRight" "left1 left2 bigRight bigRight"; } .item:nth-of-type(6n+1) { grid-area: bigLeft; } .item:nth-of-type(6n+2) { grid-area: right1; } .item:nth-of-type(6n+3) { grid-area: right2; } .item:nth-of-type(6n+4) { grid-area: left1; } .item:nth-of-type(6n+5) { grid-area: left2; } .item:nth-of-type(6n+6) { grid-area: bigRight; } }

desired grid-template-areas pattern:

Now I want this pattern repeating and repeating the more items added to the list. But HERE you can see as soon as an 7th item is added the pattern will not continued but replaced.

I also tried this with not named areas

.item:nth-of-type(6n+1) { grid-column: 1 / 3; grid-row: 1 / 3; } .item:nth-of-type(6n+2) { grid-column: 3 / 4; grid-row: 1 / 2; } .item:nth-of-type(6n+3) { grid-column: 4 / 5; grid-row: 1 / 2; } .item:nth-of-type(6n+4) { grid-column: 1 / 2; grid-row: 3 / 4; } .item:nth-of-type(6n+5) { grid-column: 2 / 3; grid-row: 3 / 4; } .item:nth-of-type(6n+6) { grid-column: 3 / 5; grid-row: 2 / 4; }

But same result...

I don´t find any solutions in the specs to accomplish "repeatable grid-template-areas"

Did anyone of you have an idea?

最满意答案

grid-templates-areas覆盖grid-template-rows ＆ -columns 。 您必须选择一种或另一种方式来描述网格布局。

对于重复模式，您可以使用:nth-child(n)并重置跨越值：（ https://codepen.io/gc-nomade/pen/qVdpwL ）或下面的代码段

.grid {
  width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  padding: 10px;
  counter-reset:div
}
.item:nth-child(6n + 4),
.item:nth-child(6n + 1) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}
.item {
  border: solid;
  display:flex;
}
.item:before {
  counter-increment:div;
  content:counter(div);
  margin:auto;
  font-size:40px;
} 
  
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div> 
  
 
 
 如果您的元素是随机的，但需要放置在网格中的特定位置（第6个位于第4个位置并且跨越），那么您需要为每个元素设置一个订单值:( ....您需要如果内容和订单可能会有所不同，请继续使用javascript 
grid-templates-areas overides the grid-template-rows & -columns. You have to choose, one or the other way to describe your grid layout.
 
For a repeating pattern, you can use :nth-child(n) and reset the spanning values : ( https://codepen.io/gc-nomade/pen/qVdpwL ) or snippet below
 
 
 
  
  
.grid {
  width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  padding: 10px;
  counter-reset:div
}
.item:nth-child(6n + 4),
.item:nth-child(6n + 1) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}
.item {
  border: solid;
  display:flex;
}
.item:before {
  counter-increment:div;
  content:counter(div);
  margin:auto;
  font-size:40px;
} 
  
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div> 
  
 
 
if your elements comes randomly but needs to be placed at specific spots in the grid (6th should be at 4th position and spanning) then you will need to set an order value for each of them :( .... there you'll need to relay on javascript if contents and orders may varies