25th May '22
/
2 comments

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

Tagged:
Bricks
CSS
CSS Grid
Posts
Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Read more →
Categories: Bricks, Pro
Tags: bricks/query/result
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…
Read more →
Categories: Free, Plugins
Tags: HappyFiles
Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Read more →
Categories: Bricks, Pro
Tags: Infinite Scroll, Masonry
How to Add a Dot Separator Between Nav Menu Items in Bricks

How to Add a Dot Separator Between Nav Menu Items in Bricks

Looking to add a circular dot separator between the nav menu items in your Bricks site? Add the following at Bricks → Settings → Custom…
Read more →
Categories: Bricks, Free
Tags: CSS, Nav Menu
Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Read more →
Categories: Bricks, Pro
Tags: Search Results
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Read more →
Categories: Bricks, Pro
Tags: Tabs
Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Read more →
Categories: Bricks, Pro
Tags: Header
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Read more →
Categories: Bricks, Free, Plugins
Tags: ACF, Animations, Isotope, Query Loop
Pro
Sticky Header Only For Visitors in Bricks

Sticky Header Only For Visitors in Bricks

A user asked: Anyone know if its possible to make the sticky of the header conditional only for logged out users? This Pro tutorial shows…
Read more →
Categories: Bricks, Pro
Tags: Sticky Header