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
Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Filtering Masonry-layout Posts by Categories in Bricks using Isotope

Step by step on how to use Isotope in Bricks for filtering posts by categories.
Read more →
Categories: Bricks, Pro
Tags: Isotope, Masonry
Pro
How to Insert an Ad or an Element Between Posts in Bricks

How to Insert an Ad or an Element Between Posts in Bricks

How to insert an image or any Bricks element between posts output by a query loop.
Read more →
Categories: Bricks, Pro
Tags: CSS Grid
Auto Responsive Grids in Bricks

Auto Responsive Grids in Bricks

This tutorial provides the CSS that can be pasted for automatic responsive grids in Bricks Builder. Posts element Each post will get a right padding…
Read more →
Categories: Bricks, Free
Tags: CSS, CSS Grid, Posts element, Query Loop
Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Read more →
Categories: Bricks, Pro
Tags: Accordion, CSS, Query Loop
Sticky Element using Position Sticky

Sticky Element using Position Sticky

If you are looking to make an element, typically, the site header sticky whether it is at the top of the page to begin with…
Read more →
Categories: Free
Tags: CSS, Sticky
How to add a resizable desktop navbar in Bricks

How to add a resizable desktop navbar in Bricks

This tutorial will show you how to add a "More" menu item when the navbar overflows on desktop.
Read more →
Categories: Bricks, Free
Tags: Menu, Nav Menu
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
Pro
How to Combine Multiple Menus into Bricks’ Mobile Menu

How to Combine Multiple Menus into Bricks’ Mobile Menu

Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas…
Read more →
Categories: Bricks, Pro
Tags: Mobile Menu, Nav Menu