Grid insertion

Responsive repeatable grid with inserts

by Luckypouet

HTML

<div class="grid">
  <div class="child">Tile 01</div>
  <div class="child">Tile 02</div>
  <div class="child">Tile 03</div>
  <div class="child">Tile 04</div>
  <div class="child">Tile 05</div>
  <div class="child">Tile 06</div>
  <div class="child">Tile 07</div>
  <div class="child">Tile 08</div>
  <div class="child">Tile 09</div>
  <div class="child">Tile 10</div>
  <div class="child">Tile 11</div>
  <div class="child">Tile 12</div>
  <div class="child">Tile 13</div>
  <div class="display">Display</div>
  <div class="child">Tile 14</div>
  <div class="child">Tile 15</div>
  <div class="child">Tile 16</div>
  <div class="child">Tile 17</div>
  <div class="child">Tile 18</div>
  <div class="child">Tile 19</div>
  <div class="child">Tile 20</div>
  <div class="child">Tile 21</div>
  <div class="child">Tile 22</div>
  <div class="child">Tile 23</div>
  <div class="child">Tile 24</div>
  <div class="child">Tile 25</div>
  <div class="child">Tile 26</div>
  <div class="child">Tile 27</div>
  <div class="child">Tile 28</div>
  <div class="child">Tile 29</div>
  <div class="display">Display</div>
  <div class="child">Tile 30</div>
  <div class="child">Tile 31</div>
  <div class="child">Tile 32</div>
  <div class="child">Tile 33</div>
  <div class="child">Tile 34</div>
  <div class="child">Tile 35</div>
  <div class="child">Tile 36</div>
  <div class="child">Tile 37</div>
  <div class="child">Tile 38</div>
  <div class="child">Tile 39</div>
  <div class="child">Tile 40</div>
  <div class="child">Tile 41</div>
  <div class="child">Tile 42</div>
  <div class="child">Tile 43</div>
  <div class="child">Tile 44</div>
  <div class="child">Tile 45</div>
  <div class="child">Tile 46</div>
  <div class="child">Tile 47</div>
  <div class="child">Tile 48</div>
  <div class="child">Tile 49</div>
  <div class="child">Tile 50</div>
  <div class="banner">Banner</div>
  </div>
</div>

CSS

.grid{
  box-sizing: border-box;
  background: #FCC;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.child,
.display{
  box-sizing: border-box;
  background: #FCF;
  padding: 16px;
  order: 1;
  
  }
  .display{
    background: #CFF;
  }  
  .child:last-child,
  .display:last-child
  {
      margin: 0 auto 0 0;
  }

  
  .banner{
    width: 100%;
    padding: 16px;
    background: #CCF;
    order: 2;
  }

@media (max-width:500px){
  
  .child,
  .display{
    width: calc(50% - 4px);
  }

  .child:nth-child(7n+5),
  .display:nth-child(7n+5){
    width: 100%;
  }
  
  .child:nth-child(n+8),
  .display:nth-child(n+8){
    order: 3;
  }
}

@media (min-width:500px){
  
  .child,
  .display{
    width: calc(33.33% - 6px);
  }
  
  .child:nth-child(8n+7),
  .child:nth-child(8n+8),
  .display:nth-child(8n+7),
  .display:nth-child(8n+8){
    width: calc(50% - 4px);
  }
  
  .display:nth-child(n+9),
  .child:nth-child(n+9){
    order: 3;
  }
  
}