Creating repeating query loop pattern

Should be possible, but it ultimately depends upon the theme you use. But since we can add custom CSS code to any theme it ought to be possible. You should be able to achieve a grid view simply be ensuring the grid view option is selected in the block settings. Your theme ought to then accommodate that. Similar for the column count.

Then all you might need to do is accomplish the alternating background colors. This can be accomplished with the :nth-child(odd) and :nth-child(even) CSS pseudo-selectors.

Hi there. Thanks for the reply!

I’m working with the Astra theme. I am able to format the query loop into a three column grid using the basic Gutenberg options , but I’m struggling with writing the necessary CSS to change the image height based on the nth child position. Are you aware of any example code that I could play with to try to achieve the desired pattern? I’ve looked all over the web without success–of course, it doesn’t help that my coding skills are lacking.

Ideally you would have provided a link to an example page if you wanted help with CSS code, but the following should work with a typical query loop block in most themes:

.wp-block-post:nth-child(even) {
    background-color: grey !important;
}

Add this to the customizer’s Additional CSS section.

You can replace “grey” with any color you like. You can use hex code colors to get exactly the shade you want, for example #B1B1A8 to get a warmish grey.

Add another similar rule to get the alternating background color, replacing “even” with “odd”. You may want to add margin and/or padding rules to get exactly the presentation you want.