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 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to Change Bricks Preloader Background Color

How to Change Bricks Preloader Background Color

Working on a dark-themed site like our friend Storm and getting blinded by the light background of Bricks' preloader screen of the editor? Here's how…
Read more →
Categories: Bricks, Free
Tags: CSS, Editor Tweaks
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Read more →
Categories: Bricks, Free
Tags: CSS, Mobile Menu
Plain HTML pages in Bricks

Plain HTML pages in Bricks

How to output only raw HTML on the page with no other WordPress/Bricks (or any other active child/parent theme)/plugins baggage.
Read more →
Categories: Bricks, Free
Tags: WordPress Page Template
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 Push The Footer Down in Bricks

How to Push The Footer Down in Bricks

Looking to have the footer stay at the bottom of the browser window in your Bricks site? Simply add this CSS: There are several places…
Read more →
Categories: Bricks, Free
Tags: Footer
Create a fullbleed grid layout with variable widths in Bricks

Create a fullbleed grid layout with variable widths in Bricks

Hey guys here's a little tutorial from a learning experience from last month's project.Maybe it will help some of yous. Maybe you'll find things to…
Read more →
Categories: Bricks, Free
Tags: CSS Grid
Pro
Floating Bottom Div when Scrolling Down in Bricks

Floating Bottom Div when Scrolling Down in Bricks

Creating a floating call to action element that reveals only as the user scrolls down.
Read more →
Categories: Bricks, Pro
Tags:
Pro
Sticky Scrolling in Bricks Builder

Sticky Scrolling in Bricks Builder

Updated on 22 Apr 2024 This Pro tutorial provides the steps to fix elements in the viewport i.e., make them sticky while adjacent content in the section…
Read more →
Categories: Bricks, Pro
Tags: CSS