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

问题描述

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

我用CSS网格创建了一个模式，该模式应在6个项目后重复出现。 / p>

  @supports（显示：网格）
 {
 .list 
 {
显示：网格； 
 grid-gap：25px; 
 grid-template-columns：repeat（4，1fr）; 
 grid-template-rows：自动; 
网格模板区域：
 bigLeft bigLeft right1 right2 
 bigLeft bigLeft bigRight bigRight 
 left1 left2 bigRight bigRight; 
} 
 
 .item：nth-​​of-type（6n + 1）
 {
网格区域：bigLeft; 
} 
 .item：nth-​​of-type（6n + 2）
 {
网格区域：right1; 
} 
 .item：nth-​​of-type（6n + 3）
 {
网格区域：right2; 
} 
 .item：nth-​​of-type（6n + 4）
 {
网格区域：left1; 
} 
 .item：nth-​​of-type（6n + 5）
 {
网格区域：left2; 
} 
 .item：nth-​​of-type（6n + 6）
 {
网格区域：bigRight; 
} 
} 
  

需要 grid-template-区域模式：

但是这里，您会在添加第7个项目后立即看到

我还尝试了未命名区域

  .item：nth-​​of-type（6n + 1）{
 grid-column：1/3; 
网格行：1/3; 
} 
 .item：nth-​​of-type（6n + 2）{
网格列：3/4; 
网格行：1/2; 
} 
 .item：nth-​​of-type（6n + 3）{
网格列：4/5; 
网格行：1/2; 
} 
 .item：nth-​​of-type（6n + 4）{
 grid-column：1/2; 
网格行：3/4; 
} 
 .item：nth-​​of-type（6n + 5）{
网格列：2/3; 
网格行：3/4; 
} 
 .item：nth-​​of-type（6n + 6）{
网格列：3/5; 
网格行：2/4; 
} 
  

但结果相同...

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

你们中有人有想法吗？

解决方案

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

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

  .grid {宽度：1000px;保证金：0自动;显示：网格； grid-gap：25px; grid-template-columns：repeat（4，1fr）; grid-auto-rows：200px;填充：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;内容：counter（div）;保证金：自动; font-size：40px;}  

 < div class = 网格> < 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上进行中继

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

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