This members-only tutorial provides the steps to display 1 wide post at the top, then a banner (any custom HTML), 4 next posts in columns, another banner (any custom HTML) followed by the next 4 posts in a 2 x 2 grid on category and tag archive pages in Oxygen - all this while using a single query (the default one) i.e., without using multiple queries having offsets.
We shall use Easy Posts and add custom CSS for the responsive CSS Grid. It is not possible to use the built-in Grid Layout option because it can not detect the banner HTML that we are going to inject using the WordPress' post counter in Easy Posts' PHP.
This can be applied to the blog posts index or any other kind of archive.
Step 1
Edit your Template with Oxygen.
Add a Section and inside that, an Easy Posts component.
Assign stacked-grid class to it.
Templates > Template PHP: