Looking to create a unique CSS grid layout with a specific pattern:
- Display 4 elements in a row, then display 2 in a row, followed by 12 (as 4 in a row), and finally 2 more elements in a row. After that, the whole pattern repeats. Here is an image of the first iteration: https://i.sstatic.net/z45gn.png
Currently experimenting with a CSS grid solution but facing some challenges. Try it out on 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 assistance or suggestions would be greatly appreciated.