Title: query loop block with offset pattern
Last modified: March 15, 2023

---

# query loop block with offset pattern

 *  Resolved [Nico Verschuren](https://wordpress.org/support/users/enve/)
 * (@enve)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/)
 * When using the offset pattern, two columns are displayed.
 * The preview shows odd posts in the first column end even posts in the second 
   column. the website shows all the posts in the first column and all the post 
   minus the first one in the second column
    -  This topic was modified 3 years, 2 months ago by [Nico Verschuren](https://wordpress.org/support/users/enve/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fquery-loop-block-with-offset-pattern%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [thelmachido a11n](https://wordpress.org/support/users/thelmachido/)
 * (@thelmachido)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16564756)
 * > The preview shows odd posts in the first column end even posts in the second
   > column.
 * Hi [@enve](https://wordpress.org/support/users/enve/) I checked the page and 
   it looks like you added Query Loop Blocks inside columns, each column will display
   posts depending on how you filtered the blocks.
 * May I ask what you want to achieve exactly ? How do you want to filter the posts?
 *  Thread Starter [Nico Verschuren](https://wordpress.org/support/users/enve/)
 * (@enve)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16565451)
 * Hi [@thelmachido](https://wordpress.org/support/users/thelmachido/)
 * I just selected the query loop, clicked “replace” and chose the offset pattern.
 * I was surprised that two columns were inserted, obviously they were a part of
   the pattern..
 * In the preview it looked like a timeline (without the line), that was what I 
   had in mind
    -  This reply was modified 3 years, 2 months ago by [Nico Verschuren](https://wordpress.org/support/users/enve/).
 *  [thelmachido a11n](https://wordpress.org/support/users/thelmachido/)
 * (@thelmachido)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16565738)
 * > I just selected the query loop, clicked “replace” and chose the offset pattern.
 * Hi [@enve](https://wordpress.org/support/users/enve/) I think they might have
   been some mixup there. I will try and explain a few things before proceeding,
   the `Replace` option allows you to change how posts will be displayed. Next to
   replace you have the `List View` and `Grid View` – the grid view will display
   your posts in columns.
 *  [⌊Screenshot 2023 03 16 at 18 56 01⌉](https://cloudup.com/cTmgBSCYh0B)
 * When using the Grid View the number of columns can be set in the block settings
   as shown below.
 *  [⌊Screenshot 2023 03 16 at 18 59 33⌉](https://cloudup.com/cF_P_FnHz5A)
 * In addition, **Offset** allows you to skip a certain number of WordPress posts
   before starting output.
 * On my site I have 1 post so entering 1 would mean that nothing will be displayed.
 * I hope that clarifies a few things for you.
 * > I was surprised that two columns were inserted, obviously they were a part 
   > of the pattern..
 * From my end, it looks like you have a query loop block inside columns it doesn’t
   look like a column that was added by the Query Loop.
 * > In the preview it looked like a timeline (without the line), that was what 
   > I had in mind
 * I would suggest adding another query loop to the page, without adding any other
   block add the Query Loop and pick the design you would prefer. I checked the 
   block on my site and everything is being displayed as expected.
 *  Thread Starter [Nico Verschuren](https://wordpress.org/support/users/enve/)
 * (@enve)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16566449)
 * Hi @thelmachido
 * I like to clear this: the “offset” you mention is a different one
 * After I clicked “replace” I had to “chose a pattern” out of 6 possible patterns
   the last of the patternss had the name “Offset”. When I chose this pattern the
   original query loop block was replaced by two columns, each containing a query
   loop block….
 * I have cleared the customizations and the original loop is back..
 * What I am looking for, looks like a grid view with two columns. On the first 
   line it should display post nr 1 on de left column with right column empty. On
   the second line it should display left column empty with post nr 2 on the right
   column. On the third line post nr 3 on the left column with right column empty,
   and so on.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16566636)
 * Hi [@enve](https://wordpress.org/support/users/enve/) – I see you’re using Twenty
   Twenty-Three. I added the Offset pattern from the Pattern library to a page in
   this theme, and this is what it looks like in the editor:
 * ![](https://i0.wp.com/cldup.com/3L3I_YRD1P.png?ssl=1)
 * And this is what it looks like on the front end:
 * ![](https://i0.wp.com/cldup.com/cTHmRsm7M2.png?ssl=1)
 * Is this the display you’re looking for?
 * If so, could you try repeating this process on a test page at **Pages > Add New**
   and provide a link to the new page here?
 *  Thread Starter [Nico Verschuren](https://wordpress.org/support/users/enve/)
 * (@enve)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16566809)
 * HI (@zoonini)
 * Here an update of the archive template
 * [https://www.nicoverschuren.nl/category/berichten/](https://www.nicoverschuren.nl/category/berichten/)
 * The result is better, almost what I hoped for..
 * on mobile it is different..
    -  This reply was modified 3 years, 2 months ago by [Nico Verschuren](https://wordpress.org/support/users/enve/).
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16566915)
 * [@enve](https://wordpress.org/support/users/enve/) Glad it’s looking more like
   what you had in mind now.
 * If you’d like to remove the spacer blocks on mobile, when the posts go down to
   one column and the offset/staggered effect is not present, you can try this custom
   CSS:
 *     ```wp-block-code
       /* Archive pages - hide spacers in Post Template block on smaller screens */
       @media screen and ( max-width: 783px ) {
         .archive .wp-block-post-template .wp-block-spacer {
           display: none;
         }
       }
       ```
   
 * While the Customizer is not exposed by default when using Site Editing, you can
   still access it manually by adding `/wp-admin/customize.php` after your URL. 
   You can then add custom CSS in the Additional CSS area.
 *  Thread Starter [Nico Verschuren](https://wordpress.org/support/users/enve/)
 * (@enve)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16567655)
 * (@zoonini) Thank you !
 * I think the best solution would be to use a normal flex-grid with two columns
   and to precede every second post with two empty blocks. I have absolutely no 
   idea how complicated that is, but I think that only in that case the order of
   the posts remains unchanged on smaller screens.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16577546)
 * The developers working on the block editor are definitely thinking about how 
   best to display blocks in the best way in various contexts and at various screen
   sizes by using a technique called [“intrinsic design.”](https://developer.wordpress.org/news/2023/02/intrinsic-design-theming-and-rethinking-how-to-design-with-wordpress/)
 * For now, what I’m able to offer as a workaround is the CSS above, but down the
   road, there will hopefully be more integrated solutions.
 * I’ll go ahead and mark this thread as resolved, but feel free to start a new 
   one if you have other questions!

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

The topic ‘query loop block with offset pattern’ is closed to new replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

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

 * 9 replies
 * 3 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [3 years, 2 months ago](https://wordpress.org/support/topic/query-loop-block-with-offset-pattern/#post-16577546)
 * Status: resolved