Custom Posts Grid Layout in Bricks using CSS Grid

There are at least three ways in which we can build custom loops in Bricks.

1. Posts element
2. Turning on Query Loop on a container
3. Code element

While #2 and #3 give the ultimate flexibility w.r.t the generated HTML output, #1 is pretty handy as well.

This Pro tutorial provides the steps to customize the Posts element's output using CSS Grid to have the 4 latest posts such that the latest is at the top left, the next one spanning two rows, and the next two at the bottom left.

In the Table Portrait (991px and below), we shall make the posts appear in a 2 x 2 grid and as a single column stacked below each other in Mobile Landscape (767px and below).

Step 1

Add a Posts element inside a container.

Query: 4 Posts Per Page.

Let us show the post's categories and title overlayed on top of the featured image for each post.

There is no built-in dynamic field in Bricks currently to have the categories as separate links that I know of so we can style them to look like this:

So let's define a custom function that returns the linked terms for the specified taxonomy having the specified class (categories in the example below) like this:

<div class="categories">
	<a href="https://bricks.local/category/cats/mountains/" rel="tag">
		Mountains
	</a>
	<a href="https://bricks.local/category/nature/" rel="tag">
		Nature
	</a>
</div>

Add the following in your child theme's functions.php or a code snippets plugin like WPCodeBox: