CSS Grid - repeatable grid-template-areas

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/47039979/css-grid-repeatable-grid-template-areas

标签

css

css-grid