Learn how to set up layout grids in your projects for aligning content and easily translating designs across device sizes.

What you'll need

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: Apply and edit layout grids across artboards

Layout grids in Adobe XD CC are column grids that are really useful when you’re aligning design content or designing for different device sizes. You can easily and quickly adjust them based on your needs.

Apply a layout grid

  • With one or more artboards selected, in the Grid section of the Property Inspector, choose Layout from the menu and select the option. The default layout grid is applied.

Editing layout grid options

With a layout grid applied to an artboard, you can then adjust the settings in the Grid section of the Property Inspector.

Number of columns: For web design, we usually design to 12 or 16 column grids. You can change the number of columns to whatever suits your needs.

Color: Clicking the color option allows you to adjust the color of the layout grid columns. By setting the Opacity to 0, you can remove the fill color of the columns and instead have outlines.

Gutter Width: The Gutter Width is the distance between each of the columns. By default, XD calculates the value for you based on the number of columns, margins, and overall width of the artboard.

Margins: Margins are the distance between the layout grid and the edge of the artboard, on all four sides. You can edit them together, by default, or separately by clicking the Different Margin For Each Side icon in the Grid section of the Property Inspector.

Tip: You can reset layout grid options to the default settings by clicking the Use Default button in the Grid section of the Property Inspector.

Saving and applying a custom layout grid

  • To save your current layout grid as the new default so that you can apply it to any artboard going forward, you can click the Make Default button in the Grid section of the Property Inspector. The layout 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 layout grid applied by clicking the Use Default button in the Grid section of the Property Inspector.

 

Back to: Add and edit artboardsUp next: Align content

 

Was this page helpful?