.grid {
width: 1000px;
margin: 0 auto;
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(6, 1fr);
// grid-auto-rows: 100px;
padding: 10px;
counter-reset: div;
}
.item {
border: solid;
display: flex;
background: linear-gradient(
to bottom right,
rgba(0, 0, 0, 0.4),
transparent,
rgba(255, 255, 255, 0.4)
)
turquoise;
}
.item:nth-child(9n + 1) {
grid-column: auto / span 3;
grid-row: auto / span 2;
background-color: red;
}
.item:nth-child(9n + 2),
.item:nth-child(9n + 3) {
grid-column: auto / span 3;
grid-row: auto / span 1;
background-color: blue;
}
.item:nth-child(9n + 4),
.item:nth-child(9n + 5),
.item:nth-child(9n + 6) {
grid-column: auto / span 2;
grid-row: auto / span 1;
background-color: green;
}
.item:nth-child(9n + 7),
.item:nth-child(9n + 8) {
grid-column: auto / span 3;
grid-row: auto / span 1;
background-color: pink;
}
.item:nth-child(9n + 9) {
grid-column: auto / span 6;
grid-row: auto / span 1;
background-color: yellow;
}
.item:before {
counter-increment: div;
content: counter(div);
margin: auto;
font-size: 40px;
}
// .item:nth-child(2n) {
// background-color: #f39;
// }
// .item:nth-child(3n) {
// background-color: #39f;
// }
// .item:nth-child(4n) {
// background-color: #9f3;
// }
// .item:nth-child(5n) {
// background-color: maroon;
// }
// .item:nth-child(6n) {
// background-color: salmon;
// }
// .item:nth-child(7n) {
// background-color: gold;
// }