<div class="brick">
  <div>Test 1 </div>
  <div>Test 2</div>
  <div>Test 3</div>
  <div>Test 4</div>
  <div>Test 5</div>
  <div>Test 6</div>
  <div>Test 7</div>
  <div>Test 8</div>
  <div>Test 9</div>
  <div>Test 10</div>
  <div>Test 11</div>
  <div>Test 12</div>
  <div>Test 13</div>
  <div>Test 14</div>
  <div>Test 15</div>
  <div>Test 16</div>
  <div>Test 17</div>
  <div>Test 18</div>
  <div>Test 19</div>
  <div>Test 20</div>
  <div>Test 21</div>
  <div>Test 22</div>
  <div>Test 23</div>
  <div>Test 24</div>
  <div>Test 25</div>
  <div>Test 26</div>
  <div>Test 27</div>
  <div>Test 28</div>
  <div>Test 29</div>
  <div>Test 30</div>
  <div>Test 31</div>
  <div>Test 32</div>
</div>
:root {
  --columns: 8;
  --row-color: brown;
  --odd-row-color: green;
}
.brick {
  display: grid;
  grid-template-columns: repeat(
    var(--columns),
    1fr );
  max-width: 1280px;
  margin: 1rem auto;
  gap: 1rem;
  border: 2px solid #000;
  background: #fff;
  box-sizing: border-box;
}
.brick > div {
  background: var(--row-color);
  color: #fff;
  border-right: none;
  grid-column: span 2;
  min-height: 50px;
  border: 2px solid #fff;
  place-content: center;
  display: grid;
}
.brick > div:nth-child(odd) {
  background: var(--odd-row-color);
}
.brick > div:nth-child(7n + 5) {
  grid-column-end: 4;
}

@media screen and (max-width: 1080px) {
  :root {
    --columns: 6;
  }
  .brick > div:nth-child(n) {
    grid-column-end: auto;
  }
  .brick > div:nth-child(5n + 4) {
    grid-column-end: 4;
  }
}

@media screen and (max-width: 800px) {
  :root {
    --columns: 4;
  }
  .brick > div:nth-child(n) {
    grid-column-end: auto;
  }
  .brick > div:nth-child(3n + 3) {
    grid-column-end: 4;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --columns: 2;
  }
  .brick > div:nth-child(n) {
    grid-column-end: auto;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.