In this tutorial, we will design a beautiful responsive pricing table from complete scratch in Bricks Builder using the display: grid layout, and repeater functions.
Before we get started, here is a quick screenshot of the pricing table we are going to design in this tutorial:
Yep, you might recognize this one. This is very similar to the pricing table I use for my course website. In the video below, I’ll show you exactly how to create this simple and elegant pricing table for your website.
Using the grid layout
For our pricing table, we’re going to use the display: grid layout. This is something we haven’t talked about much in the Bricks Course because this is one of the latest features to be added to the current version of Bricks Builder. Hopefully, you will find this useful.
We are using display: grid in this instance to create an auto-responsive layout for our pricing table. You will be able to see this better in the video tutorial above.
Creating a three-col grid layout
We want to have three columns in our container. I’ve simply added three blocks containing a heading, text, and an image element inside of the container.
Now, we need to apply the display: grid to the container. We don’t need to worry about the child elements within the container for the time being. We can style these later.
Using fractional units
I’m going to keep this as basic as possible. If you are familiar with CSS Grid and using fractional units and the repeater function, then this tutorial is not for you. If you are a beginner, this is for you.
The grid layout is defined by fractional units. So for our three-column layout, we can add the value 1fr three times as shown below:
1fr 1fr 1fr
This value will need to be added to the container > content > grid template columns field. See the image below.
However, let’s take it one step further than this. We can also use the repeat function to add our three columns. Here’s an example:
repeat(3, 1fr)
Using this value will give you the same results. Three child columns inside of your container. See the image below.
Now if you check the other viewport sizes, you will notice that the layout is NOT auto-responsive. So this is a pretty useless way to create your layouts, right?
Not at all, because you now have a basic idea of how to use fractional units and the repeat function to create columns. To make this particular layout responsive, we need to use the following declaration –
