Menu
nth-child with large number of combinations…
I’m making a dynamic grid layout and displaying images on my screen.
I’m using nth-child to set how they should be positioned. it works for my first 7 DIV’s as it’s a 7 div pattern. But for my 8th it’s using the 4th not the 1st again.
How can I get around this?
` .pic:nth-child(1n){
background: #FFCC00;
grid-row: span 2;
grid-column: span 1;
}
.pic:nth-child(2n){
background: #22ec0f;
grid-column: span 2;
grid-row: span 1
}
.pic:nth-child(3n){
background: #f88417;
grid-row: span 2;
grid-column: span 1;
}
.pic:nth-child(4n){
background: #1f4124;
grid-column: span 1;
grid-row: span 1;
}
.pic:nth-child(5n){
background: #4de2db;
grid-column: span 1;
grid-row: span 1;
}
.pic:nth-child(6n){
background: #310e58;
grid-column: span 2;
grid-row: span 1;
}
.pic:nth-child(7n){
background: #eb245f;
grid-column: span 2;
grid-row: span 1
}
</style>