This Pro tutorial walks you through the steps to use the Query Loop feature in Bricks to display a responsive grid of posts using CSS Grid while reducing the load on the database using a Bricks filter hook.
For each post we are going to set up:
- featured image in a custom image size linking to post's permalink
- post title linking to permalink
- post excerpt
- Read more button linking to permalink
We shall also ensure that the Read more button is positioned at the end (vertically) of each post.
This example is mainly meant for secondary queries where a fixed number of posts (6 in this case) are to be shown.
Step 1
Edit your Page with Bricks.
Posts Grid Query Loop Section
You can skip this entire step and simply import the Posts Grid Query Loop Section file from our test site if you want. This is provided near the end of this step.
If you want to get familiar with Bricks and learn and ins-and-outs, we recommend doing it manually as detailed below.
Add a Section. In Bricks version 1.4.0.2 and earlier, this is done by clicking the + icon, then the Layout icon (on the Container element) and clicking on "Full width (Section)".
This adds a Section having a Container.
Select the Container and add a Heading element.
You may want to change the text to something like "Latest Posts".
Add a Container below the heading. This will be the parent container of all the posts. You might want to double click on the layer name in the structure panel and rename it to something like "Posts Grid".
Let us add a bit of custom CSS for an automatic (no need to set breakpoint-specific CSS using media queries) responsive grid.
STYLE → CSS → Custom CSS:
