Jun 14, 2017 57

How to use an advanced grid

About advanced grid 

Advanced grid enables complete design freedom in the editor. Want to create asymmetrical, overlapping designs? Advanced grid is the way to go.

It does not, however, generate perfectly responsive designs. Generally, using advanced grid means there will be more revision needed on the tablet and mobile layouts. Be sure to review and refine all of your breakpoints before publishing when using advanced grid.

Turning on advanced grid

To turn it on, hover over your grid, click on the grid icon and then select Advanced grid from the menu bar. 

You can also select Advanced grid from the grid layout settings on the right.

Just like autogrid, you can add as many objects to the advanced grid as you like, as well as change the layout of the grid by adding, deleting or replacing objects. You'll also notice familiar options in the grid panel on the right, for example:

  • Full width
  • Padding vertical
  • Padding horizontal
  • Margin
  • Add a background color, image or video
  • Duplicate grid
  • Save as template

The only option you won't see available with advanced grid is Gutter, since there are no gutters when using advanced grid.

Using advanced grid

With advanced grid, you can manipulate the size and aspect ratio of each element and move them freely about the grid.

With free transform on all of your objects, you can create completely custom layouts, including asymmetrical designs and transparent text boxes

To learn more about how to arrange the order of elements, visit this page.

Scale Width v. Scale Everything

When using advanced grid you have the option to choose how your grid scales responsively.

Scale Everything

By default, Scale Everything will be turned on when you use advanced grid:

By shrinking every element proportionally with the page, "Scale everything" is the best option for responsive design.

Scale Width

If you don't want your design to scale proportionally, particularly when it comes to fonts, you can select the "Scale width" option instead.

This will scale the width of your elements, but not the height. 

If you're unsure which option to use, go for the safe bet and use the default "Scale Everything."

Photoshop and advanced grid

By default, advanced grid will always be applied when a PSD file is uploaded to the editor. To convert sections of your photoshop file into different grids (like auto or slider), be sure to organize your layer groups into sections as outlined here.