skip to Main Content

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.

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 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.
  3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search