Title: Creating repeating query loop pattern
Last modified: December 3, 2023

---

# Creating repeating query loop pattern

 *  [hopelessly](https://wordpress.org/support/users/hopelessly/)
 * (@hopelessly)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/creating-repeating-query-loop-pattern/)
 * I would like to display an archive of blog posts in an alternating pattern like
   the attached image. Is this possible using a custom query loop or another code?
   I was able to achieve a similar appearance using Stackable’s dynamic content 
   option, but this feels very clunky and slow on my site. Would appreciate any 
   and all assistance.
 * > [View post on imgur.com](https://imgur.com/cJhC9I8)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/creating-repeating-query-loop-pattern/#post-17248853)
 * 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.
 *  Thread Starter [hopelessly](https://wordpress.org/support/users/hopelessly/)
 * (@hopelessly)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/creating-repeating-query-loop-pattern/#post-17251796)
 * 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.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [2 years, 5 months ago](https://wordpress.org/support/topic/creating-repeating-query-loop-pattern/#post-17254153)
 * 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.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Creating repeating query loop pattern’ is closed to new replies.

## Tags

 * [php loop](https://wordpress.org/support/topic-tag/php-loop/)
 * [query loop](https://wordpress.org/support/topic-tag/query-loop/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [2 years, 5 months ago](https://wordpress.org/support/topic/creating-repeating-query-loop-pattern/#post-17254153)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics