Title: WP loop with different styles
Last modified: March 3, 2020

---

# WP loop with different styles

 *  [juulwp](https://wordpress.org/support/users/juulwp/)
 * (@juulwp)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/wp-loop-with-different-styles/)
 * Hello,
 * I want to make a post loop in which I give a different layout ([see photo](https://imgur.com/a/DZgA3m8)).
   First post is shown in large format, second and third posts are displayed in 
   1 column below each other. And the rest next to each other. I also want to make
   a load more with the max_num_pages. How can I build this loop?
 * Thank you in advance

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

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [6 years, 3 months ago](https://wordpress.org/support/topic/wp-loop-with-different-styles/#post-12505085)
 * I’d use CSS Grid for the layout. There are a number of generators you can use:
   [https://www.google.com/search?q=css+grid+generator](https://www.google.com/search?q=css+grid+generator)
 * Are you asking how to code a loop or how to make that layout?
 *  [Invizion](https://wordpress.org/support/users/invizion/)
 * (@invizion)
 * [6 years, 3 months ago](https://wordpress.org/support/topic/wp-loop-with-different-styles/#post-12505106)
 * In this case, how to properly split the HTML string to be worked in Gutenberg
   editor.
    I just can’t find a way to properly do it. How can I automatically and
   properly format the HTML string with blocks API?
 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [6 years, 3 months ago](https://wordpress.org/support/topic/wp-loop-with-different-styles/#post-12505123)
 * I don’t understand. What does HTML and Gutenberg have to do with this? This is
   not something you’d do editing a page, though I suppose you could create a custom
   block and incorporate (a) a loop to get N posts, (b) markup to enable use of 
   CSS Grid and (c) the CSS itself.

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

The topic ‘WP loop with different styles’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 3 participants
 * Last reply from: [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * Last activity: [6 years, 3 months ago](https://wordpress.org/support/topic/wp-loop-with-different-styles/#post-12505123)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics