CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins and padding values to compensate for those adjustment etc.

This Pro tutorial provides the CSS code for

  • automatic responsive grids and
  • manual responsive grids

using CSS Grid for the Posts element.

Add a Section having a Container.

Add a Posts element inside the Container.

Under the CONTENT tab, ensure that the Layout is Grid. This is the default setting. The default spacing value of 30px can be left alone as well. It is going to be overridden with our custom CSS.

Go to STYLE → CSS and under Custom CSS paste:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 524 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to display a Query Loop in 3 columns in Bricks

How to display a Query Loop in 3 columns in Bricks

This tutorial provides the builder settings and CSS codes that can be pasted in order to create a 3-columns query loop container inside Bricks Builder.
Categories:
Using Automatic.css in Bricks

Using Automatic.css in Bricks

Update on 18 Aug 2022: The info below is not up to date. Follow documentation/videos provided by Automatic.css. Automatic.css is an excellent CSS framework that…
Categories:
Download Area with HappyFiles

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…
Categories:
How to create a dynamic infinite logo slider with ACF and Bricks

How to create a dynamic infinite logo slider with ACF and Bricks

This tutorial provides the builder settings, PHP & CSS codes that can be pasted in order to create an infinite logo slider in pure CSS…
Pro
Dynamic Horizontal Posts Accordion in Bricks

Dynamic Horizontal Posts Accordion in Bricks

Creating a horizontal accordion of featured images from posts output by Bricks' query loop.
Categories:
Tags:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
A CSS approach to content switcher in Bricks

A CSS approach to content switcher in Bricks

In this tutorial, we'll build a 100% CSS solution for content toggles in Bricks. Introduction If you are looking for an integrated solution in Bricks…
Categories:
Tags:
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Categories:
Tags: