如何为n个元素重复显示网格区域

Question

我需要重复多行code pen issue

   <div class="list-view">
      <div class="card">lorem</div>
      <div class="card">ipsum</div>
      <div class="card">dolor</div>
      <div class="card">sit</div>
      <div class="card">lorem</div>
      <div class="card baner">banner</div>
    </div>


.list-view {
  display: grid;
  border: 1px solid red;
  grid-template-areas: "list advertisment";
  grid-template-columns: auto 240px;
  .card {
    background: #ccc;
    border:1px solid green;
    grid-area: list;
    height: 100px;
    &.baner {
      grid-area: advertisment;
      background: yellow;
    }
  }
}

Answer 1

您可以将网格项分配给特定grid-column，而不是grid-area。

codepen

.list-view {
  display: grid;
  border: 1px solid red;
  grid-template-columns: auto 240px;
}

.card {
  background: #ccc;
  border: 1px solid green;
  height: 100px;
  grid-column: 1;
}

.baner {
  background: yellow;
  grid-column: 2;
}

<div class="list-view">
  <div class="card">lorem</div>
  <div class="card">ipsum</div>
  <div class="card">dolor</div>
  <div class="card">sit</div>
  <div class="card">lorem</div>
  <div class="card baner">banner</div>
  <div class="card">lorem</div>
  <div class="card">ipsum</div>
  <div class="card">dolor</div>
  <div class="card">sit</div>
  <div class="card">lorem</div>
  <div class="card baner">banner</div>
  <div class="card">lorem</div>
  <div class="card">ipsum</div>
  <div class="card">dolor</div>
  <div class="card">sit</div>
  <div class="card">lorem</div>
  <div class="card baner">banner</div>
</div>