<!-- linear layout for this example - would have been easy with nested rows -->
<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>

.brick {
  display: grid;
  max-width: 1280px;
  margin: 1rem auto;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  outline: 2px solid #000;
  background: brown;
  color: #fff;
  grid-template-columns: repeat(8, 12.5%);
  box-sizing: border-box;
}
.brick > div {
  background: brown;
  border-right: none;
  grid-column: span 2;
  min-height: 50px;
  border: 2px solid #fff;
  place-content: center;
  display: grid;
}
.brick > div:nth-child(7n + 5),
.brick > div:nth-child(7n + 6),
.brick > div:nth-child(7n + 7) {
  background: green;
}
.brick > div:nth-child(7n + 5) {
  grid-column-end: 4;
}