<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;
/* use minmax to avoid overflow when using gap*/
grid-template-columns: repeat(
var(--columns),
minmax(auto, calc(100% / var(--columns)))
);
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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.