How can I make a repeated pattern in a css grid

Ndx
June 22, 2023
287 views
2 votes
3 Answers

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:

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.

Tags: css css-grid

Answers

You can do this by specifying a grid of 4 columns…

EDIT: the description changed and the image makes what is needed clearer. Here’s edited version:

…then noticing that everything is in a single cell unless it is a :nth-child(20n+5), :nth-child(20n+6), :nth-child(20n+19) or :nth-child(20n+20) and for these setting the column span to 2.

Here’s a simple snippet with a few more elements added to make certain we are repeating the pattern:

<style>
  .parent {
    display: grid;
    width: 100vw;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .child:nth-child(20n + 5),
  .child:nth-child(20n + 6),
  .child:nth-child(20n + 19),
  .child:nth-child(20n + 20) {
    grid-column: span 2;
  }
</style>
<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 class="child">child-33</div>
  <div class="child">child-34</div>
  <div class="child">child-35</div>
  <div class="child">child-36</div>
  <div class="child">child-37</div>
  <div class="child">child-38</div>
  <div class="child">child-39</div>
  <div class="child">child-40</div>
  <div class="child">child-41</div>
  <div class="child">child-42</div>

</div>

- Andr233
- June 22, 2023 at 10:39 am
- 0 votes
0
You are both really close to the solution. According to the image the cells that should be wider are the 5th and 6th ones, and then again 14 cells later (12 + the 2 wider ones).

This code will do that:
```
.child:nth-child(14n + 5), .child:nth-child(14n + 6) {
    grid-column: span 2;
}
```
And this segment from the original code should be removed:
```
.child:nth-child(-n + 2) {
  grid-column: span 2; 
  grid-row: span 2;
}

.child:nth-child(5n) {
  grid-column: span 1; 
  grid-row: span 2;
}
```
Update
To match the pattern (4->2->12->2->4->2->12->2) mentioned in the comment this code will work:
```
.child:nth-child(20n + 5), .child:nth-child(20n + 6), .child:nth-child(20n + 18), .child:nth-child(20n + 19)  {
    grid-column: span 2;
}
```
Login or Signup to reply.

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>

Please signup or login to give your own answer.

Click here to cancel reply.