See how to set up square grids on artboards and understand why they are a useful method for aligning and sizing content.


This sample file is an Adobe Stock asset you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

What you learned: How to apply and edit square grids on artboards

When you’re designing mobile apps or drawing content like icons, square grids—grids with both horizontal and vertical lines—make precise sizing and alignment faster and easier.

Apply a square grid

  • You can easily apply a single square grid to any artboards you select. With one or more artboards selected, in the Grid section of the Property inspector, choose Square from the menu, making sure the option to the left of the menu is selected and make sure that the option is selected. The default square grid is applied.

Editing square grid options

There are several options you can edit for a square grid applied to selected artboards.

  • Grid Size: The distance between the gridlines in the square grid. The larger the number, the larger the grid. The default value of 8 is a typical value for app design since it represents an 8 pt grid size. You can adjust this size to suit your design needs, making it different for different artboards.
  • Color: The color of the grid can be changed by clicking the color option in the Grid section of the Property Inspector. This makes it so the grid can be seen more or less when it is placed over your design content.

Saving and applying a custom square grid

  • To save your current square grid as the new default so that you can apply it to any artboard going forward, click the Make Default button in the Grid section of the Property Inspector. The square grid options for the selected artboard(s) are now saved as the default settings.

You can apply the new default settings to any selected artboards with a square grid applied by clicking the Use Default button in the Grid section of the Property Inspector.


Back to: Use layout grids | Up next: Start with wireframe kits