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.
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
Grid Layout implementation has 2 stages:
- Defining the grid structure (the foundational blocks)
- 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.
Note: For an advanced grid created using the FR unit, the size and structure of the grid may change when you add and position content to it (especially its vertical height).
One thing you should keep in mind is – An FR grid structure affects the size of the grid child, and the size of the grid child elements also affects the grid structure. It’s a 2-way relation.
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.)