Creating Columns and Rows with Gridable

Gridable is an in-house tool which allows you to create an adaptable and fully responsive grid in no time. You can start by simply experimenting how it works to discover its enormous potential.

Create rows

Rows make the whole content grid, and each one can contain up to 12 columns. To create a new row in your grid, just press the Add Row button next to the Add Media button. As you can see, a two-columns row is available on your page.
If you want to remove the row, all you have to do is to click inside of one of the columns and press the Remove Row button in the top toolbar. Check this out to get a glimpse:

Create columns

Once you add a new row to the grid, you automatically get two columns. If you plan on using several, just click the plus sign in the Columns section of the grid toolbar. You can play with it to adjust the number with ease.

As said, you can have up to 12 columns in a single row. If you want to have columns with the same width, you should have two, three, four, six or 12 columns on the same row.
If you find that there are too many columns in the row, just press the minus sign. Here’s a short video to assist you:

Change columns width

With Gridable, switching the width of the columns is now easier than ever. To do that, you just need to drag each column and set its size. Nothing more, nothing less. Watch this GIF to make it happen:

Add a new row

A complex grid content is made out of multiple rows. You can easily add a new one in your page by going to the end of the current row and pressing once again the Add Row button. Now you have a new row where you can add or remove the number and content of the columns. Video right here:

Create a full-width row

You might face situations where you need to add a full-width row inside your content. By the way, each row is set up to fill the width of the page. If you want your content to be stretched on one single line (or row), please remove all the columns until you have just one left:

Edit columns options

As for the columns’ options, you can change the style of each column by choosing between Simple, Island or Feature Box. Also, if you want to design one of your rows a bit different, you can add a CSS class to the CSS Class field.

Updated on August 25, 2020

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at and we will give you a helping hand.