Elementor Grid Line Overlay (Pro): A Design Grid for Aligned Layouts
Grid Line is a Master Addons Pro extension that draws a column grid over your page inside the Elementor editor. You set the number of columns, the gutter, the max width and the offset in Page Settings, then line up sections and widgets against the columns, the way designers work in Figma. The grid only shows while you edit, and visitors never see it on the published page.
How to Use Grid Line in Elementor
Grid Line is a per-page setting, so you switch it on only where you need it. Check out this Grid Line Extension docs.
- With Master Addons Pro active, go to Master Addons > Extensions and switch on Grid Line.
- Open a page in Elementor and click the Page Settings icon in the top bar.
- On the Settings tab, expand Grid Line and set Enable to On.
- Set Columns, Max Width and Gutter to match your design, and add an Offset if your layout has side margins.
- Switch to tablet and mobile view to set values for those screens.
- Line up your sections and widgets against the columns. The grid does not appear on the published page.
Columns, Gutter, Width and Offset
The Grid Line section in Page Settings has an Enable switch, Grid Color (a light translucent grey by default), Columns from 1 to 12, Max Width, Offset, Gutter and Z-Index. Columns, Max Width, Offset and Gutter can take different values on desktop, tablet and mobile.
- Defaults: 12 columns, 1140px max width and a 15px gutter on desktop, 1025px and 10px on tablet, 768px and 8px on mobile.
- Match your theme: set Max Width to your site’s content width so the columns line up with the real layout.
- Visibility: pick a color with transparency so your content stays readable, and keep Z-Index at 999 so the grid sits above the design.
Ways to Check a Layout Against a Grid in Elementor
Elementor has no design grid overlay of its own. These are the usual options.
| Feature | Elementor alone | Browser DevTools grid inspector | Master Addons Grid Line |
|---|---|---|---|
| Price | Free | Free | Master Addons Pro |
| Design column grid over the page | No | Only on elements that use CSS Grid | Yes, across the whole page |
| Set up inside the Elementor editor | No | No, you inspect the preview frame | Yes, in Page Settings |
| Columns, gutter and width per device | No | Follows the element’s own grid | Yes |
| Visible to visitors | No | No | No |
If your layout already uses Elementor’s Grid container, the browser’s grid inspector can show those tracks for free. Grid Line is for checking any layout, flexbox containers included, against a fixed design grid like the one in your Figma file.
Other editor helpers: Which Element (free) and Positioning (free).
Frequently Asked Questions For Grid Line
Does the grid affect how my site looks on the front end?
No. The grid only shows inside the Elementor editor. Visitors see the published page without it, even if you leave Enable on.
What is the difference between Gutter and Offset?
Gutter is the space between columns. Offset is the space between the edge of the screen and where the grid starts. Together with Max Width they let you copy your theme’s content width and column spacing.
Can I use this with Elementor’s own Flexbox Container system?
Yes. The grid is drawn over the whole preview, so it works with flexbox containers, grid containers and older sections alike. It does not snap elements to the columns, so you line them up yourself.
Is Grid Line free?
No. Grid Line is part of Master Addons Pro.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
