Creating Columns and Rows with Gridable

Grid­able is an in-house tool which allows you to cre­ate an adapt­able and ful­ly respon­sive grid in no time. You can start by sim­ply exper­i­ment­ing how it works to dis­cov­er its enor­mous potential.

Create rows

Rows make the whole con­tent grid, and each one can con­tain up to 12 columns. To cre­ate a new row in your grid, just press the Add Row but­ton next to the Add Media but­ton. As you can see, a two-columns row is avail­able 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 but­ton in the top tool­bar. Check this out to get a glimpse:

Create columns

Once you add a new row to the grid, you auto­mat­i­cal­ly get two columns. If you plan on using sev­er­al, just click the plus sign in the Columns sec­tion of the grid tool­bar. You can play with it to adjust the num­ber with ease.

As said, you can have up to 12 columns in a sin­gle 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 Grid­able, switch­ing the width of the columns is now eas­i­er than ever. To do that, you just need to drag each col­umn and set its size. Noth­ing more, noth­ing less. Watch this GIF to make it happen:

Add a new row

A com­plex grid con­tent is made out of mul­ti­ple rows. You can eas­i­ly add a new one in your page by going to the end of the cur­rent row and press­ing once again the Add Row but­ton. Now you have a new row where you can add or remove the num­ber and con­tent of the columns. Video right here:

Create a full-width row

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

Updated on September 12, 2017

Was this article helpful?