WordPress Gutenberg Block editor – Query loop – Mobile Friendly queries.

How to use the query loop: You can display a query loop either as Vertical List or as a Grid.

Query loop as a Grid

1. Select the Post Template and choose “grid”
2. Select the Grid in list view > style > choose minimum Height 100%: Now every grid-box that contains a post entry will span the full height of its container (if you set a background color to the grid, you will see that the background fills the whole grid)
   • 
   • Set Grid item Position to Auto. If you set it to manual choose Columns 1.
3. Optional: Add a stack inside the Grid (so grid is parent): Then place Title, Featured image and Date inside stack.
   • Now set stack Justification to “Stretch items ” It makes all child blocks inside the Stack stretch to the full available width of the container. Optionally you could also choose “center”
   • Set orientation: Vertical
   • 
4. Below I’ve created a border around the Grid (outer border) and the Stack (inner border): Here is the list view Structure
5. Center the text

This is how the Query loop result will look on your page