Adobe XD Grids

Mar 23, 2020

Adobe XD has a strange way of calculating grids that isn’t immediately apparent. If you know the number of columns, gutter width, and column width you want, entering those in that order will cause XD to to resize your gutter width.

Setting up Adobe XD grids Setting up Adobe XD grids
Trying to set the widths from top to bottom causes the Gutter Width to resize by itself.

Instead, calculate the margin width in the current artboard to set the correct column width. Weird hack, but it works! Here’s a simple formula:

[Artboard Width − # Cols × Col Width − (# Cols − 1) × Gutter Width ] ÷ 2

[1920 − (12 × 96) − (11 × 24)] ÷ 2 = 252

Setting up Adobe XD grids Setting up Adobe XD grids

Now if you resize the artboard after the grid has been set, you’ll have to re-calculate the margins again.