July 10, 2023

How to use the Bricks Builder CSS Grid

Play Video

The Bricks Builder CSS Grid is a helpful tool that web designers can leverage to create flexible and responsive web layouts. This concept, explained by Web Squadron, gives you the ability to control the positioning of elements in rows and columns, providing you with more control over your web design.

Bricks Builder CSS Grid Example
Bricks Builder CSS Grid Example

Understanding the Basics of Bricks Builder CSS Grid

The CSS Grid feature was introduced in Bricks Builder version 1.6.1. This feature provides an alternative to the Flexbox container, offering more flexibility in positioning rows and columns.

To understand the CSS Grid, it’s important to familiarize yourself with the concept of rows and columns. In a grid layout, elements are placed in these rows and columns, which can be manipulated to create a variety of layouts.

Setting Up the Grid

Setting up the grid in Bricks Builder involves defining the grid template columns and rows. This process allows you to create a bespoke layout using the CSS Grid. Here’s how you can do it:

  1. Create a new section and container in Bricks Builder.
  2. Add blocks to the container. For this example, let’s add eight blocks.
  3. Go to the ‘Display’ option on the left-hand side and select ‘Grid’.
  4. Under the ‘Grid’ option, you’ll find features for setting up the grid.

Manipulating the Grid

Once you’ve set up the grid, you can start manipulating it. This involves using the grid item, grid column, and grid row features. Here’s a step-by-step guide:

  1. Click on the block you want to manipulate.
  2. Go to the ‘Content’ tab.
  3. Under the ‘Grid’ option, you’ll find ‘Grid Column’ and ‘Grid Row’.
  4. Use these options to position the block in the grid.

Advanced Bricks CSS Grid Techniques

With the Bricks CSS Grid, you can create complex and unique layouts. Here’s how:

  1. Define the size of the columns using the ‘Grid Template Columns’ feature.
  2. Use the ‘Grid Column’ and ‘Grid Row’ features to position blocks in the grid.
  3. Experiment with different layouts by changing the values in the ‘Grid Template Columns’ and ‘Grid Template Rows’ features.


The CSS Grid in Bricks Builder offers a flexible and powerful tool for creating web layouts. By understanding and mastering this feature, you can create unique and responsive designs for your website.

Additional Sources

For more information and on the CSS Grid in Bricks Builder, check out the following resources:

Required Resources

Bricks Builder Logo
Payment required
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
How to use the Bricks Builder CSS Grid
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.