Please add a widget to this widget area to see your content.

The Grid Control

The grid control allows you to create any layout you want for your website.

Add any number of rows and columns.
Adjust & reorder widget areas, content, navigation, branding, sliders etc.
Bring your site to life quickly and conveniently, right from inside the customizer. All while previewing your changes live!

Adding and removing rows and columns

Dedicated buttons on the top of the grid control allow you to add extra columns and rows.

You can add any number of rows and columns you want. New columns and rows get added at the end of any existing ones.

Note: You cannot remove rows/columns that are occupied by grid-parts. In that case remove the grid-parts occupying them first.

Resizing columns and rows

To resize a column, write any valid CSS value on top of the corresponding column.

To resize a row, simply write a value right next to the row you want to change. You can use any valid CSS value.

The fr CSS Unit

You can use any valid CSS unit you want for your columns and rows. CSS-Grids however introduce another very useful concept: the fr unit.
The new fr unit represents a fraction of the available space in the grid container.
To make this easier to understand, let’s assume that the width of our screen is a nice round number: 1000 pixels.
If we have a grid with 4 columns and each one is set to 1fr, then our browser will internally go through these steps:

  1. How much space is available? – 1000px.
  2. How many fractions exist in total? – 4 (we have 4 columns, each one being 1fr: 1fr + 1fr + 1fr + 1fr).
  3. The width of each fraction is 1000px (our total width) divided by 4 (our total number of fraction). – 250px 

In the above simple example we’ll end up with 4 columns, all of them equal to 250px.

If we change the 1st column to be 2fr and leave other columns to 1fr, then the same calculations will now look like this:

  1. How much space is available? – 1000px.
  2. How many fractions exist in total? – 5 (we have 4 columns, the first one being 2fr and others 1fr: 2fr + 1fr + 1fr + 1fr).
  3. The width of each fraction is 1000px divided by 5 (our total number of fractions) – 200px.

Since each fraction is equal to 200px, our first column will have a width of 400px (2fr) and the other 3 columns will be 200px each.

Let’s make this even more complicated to cover all scenarios:
We’ll have 3 columns. We’ll set the first column to 400px, the second column 2fr and the third column 1fr.

Now something interesting happens in our grid: we want one column to have a set size of 400px, and we want the other 2 columns to be auto-calculated.
The set-size of the 1st column changes the “available space” that our browser can use for its calculations so they will now look like this:

  1.  How much space is available? – 600px (the total width which is 1000px, minus all non-fr columns, so 1000px - 400px.
  2. How many fractions exist in total? – 3 (we only take into account fr units, so we have 2fr + 1fr.
  3. The width of each fraction will be the available space (600px) divided by the number of total fractions (3). So each fraction will be 200px.

So now our grid-columns will have a size of 400px the 1st one, 400px the 2nd one and 200px the 3rd one.
What makes this interesting is responsive layouts: We can have a sidebar for example that is set to a static value, and the rest of our layout can adjust and resize automatically depending on the user’s screen-size.

Grid-part actions

When you hover a grid-part, you’ll see icons that allow you to perform additional actions:

  • Edit grid-part options
  • Reposition the grid-part in the grid
  • Delete the grid-part.

Adding a new grid-part

To add a new grid-part, you can click on any empty region in your grid. To make the grid-part span multiple areas, all you have to do is click and drag these areas.

You can then select from a list of available grid-parts you can add.