Grid Layout

The grid layout powerup introduces a new way to position your content allowing full freedom to define the layout structure however you like.

It’s built upon the CSS3 Grid feature (browser compatibility chart) and is a simplified implementation abstracting the concept in easy to use controls.

The Visual Overlay gives you live feedback on how your grid structure changes as you start adding and positioning content to it.

Video walkthrough

This article is still a work-in-progress, so, in the meantime, check out this full grid layout walkthrough video where I create a challenging layout from scratch explaining the feature, controls, and how to use it (skim through the timeline if needed):

Import this another grid layout template to play around and understand how it’s used in practice – Download from here

The concept

Grid Layout implementation has 2 stages:

1. Defining the grid structure (the foundational blocks)
2. Placing your content (grid child) in those blocks

Defining the structure at sections

The feature is woven tightly into the default Elementor’s structure of Section > Column.

Here, the Section becomes the container where you define the grid structure, and the Columns become the grid child which you position in those blocks.

(and then these columns can contain any widgets you want, just like usual Elementor stuff)

To convert the section into a grid, just change the “Layout” option from Flex to Grid.

The grid section has 2 modes of usage, for different purposes:

• Basic lets you define equal square blocks just by defining the number of rows and columns.
• Advanced goes a step further and lets you define the size of each row and column individually.

(most of the times, you’d want to use the Advanced Grid mode to have full control over grid structure)

CSS3 Grid introduces a new “FR” unit which you’ll be using for creating an advanced grid structure. It’s a flexible unit without any inherent fixed value, so, its meaning is defined by fractions, i.e. number of total FRs you have in a structure. Read more about the FR unit here.

Define the columns and rows structure with space-separated unit value, like normal CSS properties:

• E.g: “1fr 2.5fr 2fr” – This will create 3 columns/rows of the defined size

You can mix and match different units however you like, i.e. “px”, “%”, “em”, “vh”, etc. are all compatible. Though, the recommended units are “fr”, and “px”. Use the “%” unit with care since it does not take the grid-gap into account.

Once you get the structure ready to the way you want it, it’s time to create columns and position your child.

Positioning the columns

Again, there are 2 modes for grid child (column) positioning: Auto & Manual

With the auto mode, the browser automatically determines the space to fill based on the order of elements, and it doesn’t allow an overlap of any other grid child (column) on itself.

The manual mode gives you full freedom to position your grid child in whichever grid block you want. You can define the starting block (both row and column) and how many blocks it should span. If any other grid child also uses those columns or rows, it will overlap and the child which is positioned last will show up on top.

You can do a mix of both auto and manual positioning, but then, the manual positioned columns won’t be able to overlap auto.

So, a recommended protocol is to either have all children as auto-positioned (if you want them in a straight left-to-right top-to-bottom order automatically) or all as manual (even if you want just a single column to overlap).

Most of the time, you’d need manual positioning to put the column in whichever block you want.

(This guide is a work-in-progress and it’ll be updated soon with easier language and helpful screenshots to go alongside. Till then, please watch the video walkthrough above to understand the concept better.)