50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Custom Posts Grid Layout in Bricks using CSS Grid

custom-posts-grid-bricks

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.

custom-posts-grid-bricks

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:

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

Leave the first comment