Search code examples
csscss-grid

How can I make a repeated pattern in a css grid

I'm trying to make a css grid of the following pattern

  • display 4 elements in a row, then display 2 in row, then 12 (as 4 in row), and last 2 (in a row), then repeat the whole pattern again. This is a picture of the first iteration: enter image description here

I'm trying the solution with css grid, was bit stuck FiddleJS: https://jsfiddle.net/g15nyto6/42/

.parent {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* grid-auto-rows: 50px; */
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
}

.child {
  background: tomato;
  width: 100%;
  height: 100%;
}

.child:nth-child(-n + 2) {
  background: cadetblue;
  grid-column: span 2;
  grid-row: span 2;
}

.child:nth-child(5n) {
  background: pink;
  grid-column: span 1;
  grid-row: span 2;
}
<div class="parent">
  <div class="child">child-1</div>
  <div class="child">child-2</div>
  <div class="child">child-3</div>
  <div class="child">child-4</div>
  <div class="child">child-5</div>
  <div class="child">child-6</div>
  <div class="child">child-7</div>
  <div class="child">child-8</div>
  <div class="child">child-9</div>
  <div class="child">child-10</div>
  <div class="child">child-11</div>
  <div class="child">child-12</div>
  <div class="child">child-13</div>
  <div class="child">child-14</div>
  <div class="child">child-15</div>
  <div class="child">child-16</div>
  <div class="child">child-17</div>
  <div class="child">child-18</div>
  <div class="child">child-19</div>
  <div class="child">child-20</div>
  <div class="child">child-21</div>
  <div class="child">child-22</div>
  <div class="child">child-23</div>
  <div class="child">child-24</div>
  <div class="child">child-25</div>
  <div class="child">child-26</div>
  <div class="child">child-27</div>
  <div class="child">child-28</div>
  <div class="child">child-29</div>
  <div class="child">child-30</div>
  <div class="child">child-31</div>
  <div class="child">child-32</div>
</div>

Any help would be appreciated.

Solution

  • You need to select the 5th, 6th, 19th and 20th every 20 children. :nth-child() accepts a formula of an+b form, in which we need to replace a with 20 and b with 5/6/19/20:

    .child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {}

    Try it:

    const parent = document.querySelector('.parent');

for (let i = 0, l = 40 + Math.random() * 40 | 0; i < l; i++) {
  const child = document.createElement('div');
  child.classList.add('child');
  child.textContent = `child-${i + 1}`;
  parent.appendChild(child);
}
    .parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.child {
  background: tomato;
  height: 20px;
}

.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {
  background: cadetblue;
  grid-column: span 2;
}
    <div class="parent"></div>