d2321
4/10/2020 - 2:03 PM

css grid 2

.grid {
  width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(6, 1fr);
  //   grid-auto-rows: 100px;
  padding: 10px;
  counter-reset: div;
}
.item {
  border: solid;
  display: flex;
  background: linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0.4),
      transparent,
      rgba(255, 255, 255, 0.4)
    )
    turquoise;
}

.item:nth-child(9n + 1) {
  grid-column: auto / span 3;
  grid-row: auto / span 2;
  background-color: red;
}

.item:nth-child(9n + 2),
.item:nth-child(9n + 3) {
  grid-column: auto / span 3;
  grid-row: auto / span 1;
  background-color: blue;
}

.item:nth-child(9n + 4),
.item:nth-child(9n + 5),
.item:nth-child(9n + 6) {
  grid-column: auto / span 2;
  grid-row: auto / span 1;
  background-color: green;
}

.item:nth-child(9n + 7),
.item:nth-child(9n + 8) {
  grid-column: auto / span 3;
  grid-row: auto / span 1;
  background-color: pink;
}

.item:nth-child(9n + 9) {
  grid-column: auto / span 6;
  grid-row: auto / span 1;
  background-color: yellow;
}

.item:before {
  counter-increment: div;
  content: counter(div);
  margin: auto;
  font-size: 40px;
}

// .item:nth-child(2n) {
//   background-color: #f39;
// }
// .item:nth-child(3n) {
//   background-color: #39f;
// }
// .item:nth-child(4n) {
//   background-color: #9f3;
// }
// .item:nth-child(5n) {
//   background-color: maroon;
// }
// .item:nth-child(6n) {
//   background-color: salmon;
// }
// .item:nth-child(7n) {
//   background-color: gold;
// }
<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 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>