Search code examples
csscss-selectorsgrid

Larger squares in a grid using nth-child

I need some help getting my grid right. I've created a CodePen which shows the issue.

With

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>  
</div>

and

.parent {
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 410px;
}

.child {
  background-color: #000;
  width: 200px;
  height: 100px;
}

.child:nth-child(2),
.child:nth-child(4n) {
  grid-row: span 2;
  width: 200px;
  height: 210px;
}

it's nearly right except for here:

enter image description here

where there shouldn't be a row of non-square boxes in between, it should always alternate between having a large square box on the right followed by one on the left.

Solution

  • I would try this:

    .child:nth-child(6n+2),
.child:nth-child(6n+4) { }


    .parent {
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 410px;
}

.child {
  background-color: #000;
  width: 200px;
  height: 100px;
}

.child:nth-child(6n+2),
.child:nth-child(6n+4) {
  grid-row: span 2;
  width: 200px;
  height: 210px;
}
    <div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>  
</div>

    It's just a matter of working out the patterns, and then working out how to select them:

    2,4 … 8, 10 … 14, 16 … 20, 22 … 26, 28 …