Layout Grid

The Layout Grid feature enables a customizable layout grid to help you design pixel-perfect pages following a standard set of rules.

Quick intro to Layout Grids:

Layout Grids are most commonly used to help designers build pages with more precision and accuracy.

Getting the most value out of Layout Grids:

Here are some different ways you can use Layout Grids to design better pages:

  • Properly align your widgets and elements
  • Keep your content organized
  • Quickly know where to place or position elements on the page
  • Enhance the visual hierarchy of your pages

How to enable the Layout Grid:

  1. Edit a Post / Page / Theme Builder Section with Elementor.
  2. Go to Page Settings (from the Gear icon at the bottom left), navigate to the Style tab and you’ll see and you’ll find the Grid switch in the Design Grid section. Turn on the switch and the page grid will appear.
Page Grid Settings - Elementor Designer Powerup

You can reorder, duplicate and delete the colors just like with any other Elementor repeater control.

To get the most out of the Layout Grid feature and build better UI, refer to this article on Smashing Magazine.

Page Grid options:

  • Max width: The maximum width of the layout grid.
  • Offset: The spacing from both the horizontal ends of the grid.
  • Columns: The number of columns you want in the grid.
  • Gutter: The spacing between the columns.
  • Grid color: The color of the grid columns. You can use the alpha slider to make the grid layout more translucent.

All the grid fine-tuning options are responsive, i.e. you can set a different setting as per device breakpoints to build clean and better UI on every device.

Note:

  • The grid is not shown on the final page. It’s only for design purposes.
  • The grid styles are saved for a page once you enable the grid.
  • You cannot apply the same grid style to all the pages at once.
  • Layout Grid supports both px and em unit values.
Was this page helpful?