I want to create a grid layout that consists of a repeating pattern

Question

And I have partially succeeded, but for some reason the 5th, 6th and 7th children won't listen to the ordering I set them.

.grid{
    display: grid;
    gap: 20px;

    display: grid;
    grid-gap: 15px;

    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 50px; /* height of one row */
}

.grid > .item:nth-child(9n+1),
.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1;
    background-color: red;

}

.grid > .item:nth-child(9n+2),
.grid > .item:nth-child(9n+3),
.grid > .item:nth-child(9n+5),
.grid > .item:nth-child(9n+6){
  grid-area: span 1 / span 1;
  background-color: green;
}

.grid > .item:nth-child(9n + 4) {
  grid-area: span 2 / span 2; 
  background-color: yellow;
}

.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1; 
    background-color: red; 
}

 .grid > .item:nth-child(9n+8),
 .grid > .item:nth-child(9n+9) {
    background-color: deepskyblue;
    grid-area: span 2 / span 1; 
 }

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

Basically the red and green items should behave the same just be on the reverse side when they appear again. I don't usually use display:grid;, I would love to hear why this is happening and if there is a way to get it to display like I want i to.

Answer 1

You need to explicitly place the 6th item on the first column otherwise it get place before the red element (the 7th one) on the second column.

.grid{
    display: grid;
    gap: 20px;

    display: grid;
    grid-gap: 15px;

    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 50px; /* height of one row */
}

.grid > .item:nth-child(9n+1),
.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1;
    background-color: red;
}
.grid > .item:nth-child(9n+2),
.grid > .item:nth-child(9n+3),
.grid > .item:nth-child(9n+5),
.grid > .item:nth-child(9n+6){
  background-color: green;
}
.grid > .item:nth-child(9n+6){
  grid-column: 1;
}

.grid > .item:nth-child(9n + 4) {
  grid-area: span 2 / span 2; 
  background-color: yellow;
}

.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1; 
    background-color: red; 
}

 .grid > .item:nth-child(9n+8),
 .grid > .item:nth-child(9n+9) {
    background-color: deepskyblue;
    grid-area: span 2 / span 1; 
 }

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