Add a grid to your artboards in Adobe XD CC to help lay out your website designs.
setup-web-design-grid_1000x560

Open a file and select the artboard, or use the Artboard tool to create a new one. Then choose Layout in the Grid section of the Properties Inspector. Feel free to use the sample file provided as a reference.

setup-web-design-grid_step-1

Experiment with the number and color of columns, column and gutter widths, and margin settings to create a grid that best suits your design. Keep in mind that you can change the grid at any time.

setup-web-design-grid_step-2

For our web design, we chose a 12-column grid and added text and graphics. The automatic snap-to-grid feature and smart guides made it easy to position our design elements. Once we were sure this grid worked well, we selected our artboard in the Layers panel and clicked Make Default in the Properties Inspector.

setup-web-design-grid_step-3

Now we can apply the custom grid to other artboards that are similar in size. Or, we can manually customize it for other screen sizes.

setup-web-design-grid_step-4

Now you can define grids to keep all your website designs looking sharp.

11/05/2018

Adobe Stock contributor: luckybusiness

Was this page helpful?