Jun 14, 2017 53

How to use an advanced grid

Turning on advanced grid 

Advanced grid is the easiest way to enable free transform for every element in your grid. Turning on advanced grid gives you complete control over the grid.

To turn it on, hover over your grid, click on the grid icon and then select Autogrid View On/Off from the menu. 

Note: You can also adjust the grid layout from the right side panel.

Just like the autogrid, you can add as many objects to the advanced grid as you like, change the layout of the grid by adding, deleting or replacing objects, making the grid full bleed etc.

Using Advanced Grid

Unlike autogrid, in advanced grid you can change the sizes of each object and move them freely.

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 send an element to front or push an element to the back, visit this page.

Note: Using advanced grid enables complete design freedom. However, it will not generate perfectly responsive designs. Be sure to check and edit all of your breakpoints when using advanced grid.

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."