Change Background Colors On Grido Layout

14 May 7, 2023

Follow the instructions below to change the background color of the various grid boxes in the Grido layout.

Enable “Advance Customization CSS / SCSS” in colors tab and enter this:

.layout.layout_grido .object:nth-child(6n+1){

background: #364F6B;

}

.layout.layout_grido .object:nth-child(6n+2){

background: #EA7362;

}

.layout.layout_grido .object:nth-child(6n+3){

background: #FF895D;

}

.layout.layout_grido .object:nth-child(6n+4){

background: #20DECB;

}

.layout.layout_grido .object:nth-child(6n+5){

background: #FFA0C2;

}

.layout.layout_grido .object:nth-child(6n+6){

background: #9ED763;

}

And if you need to change the text color also, Add color property like this example:

.layout.layout_grido .object:nth-child(6n+1){

background: #364F6B;

color: #000000;

}