Layout Grid (Columns, Rows, Margins, Gutter)

Have an ability to display a grid/guides mainly for web design use cases.

2,353 votes

Your name

Your email address

Check!

invalid email

(thinking…)

Reset

or sign in with

UserVoice password

Forgot password?

Create a password

Signed in as (Sign out)

We’ll send you updates on this idea

jsprlprd shared this idea · March 14, 2016 · Flag idea as inappropriate… · Admin →

feature-completed ·

AdminElaine (Adobe) (Admin, Adobe) responded · November 21, 2017

As you’ve probably noticed, we’ve delivered Layout Grids in the November release of XD. We’d love specific feedback on Layout Grids as we continue to grow, so I’m closing this feature request. If you have specific additional functionality you’d like to see in the Layout Grid feature, please do file it as a new feature request in the Design feature area!

Thanks,

-Elaine

Show previous admin responses (6)

feature-started ·

AdminElaine (Adobe) (Admin, Adobe) responded · June 02, 2017

We’ve tried to keep it under wraps, but we’re currently working on the early steps of getting this feature working. Please be patient with us and be on the lookout for some upcoming research opportunities!

Thanks,

-Elaine

feature-in-the-backlog ·

Tom Krcha responded · August 11, 2016

We are currently designing this feature and planning to pickup this work soon. It’s high on the list for us.

Tom (Adobe XD)

feature-in-the-backlog ·

Tom Krcha responded · May 25, 2016

We currently support Square Grid per artboard.

Layout Grid is coming in the future.

Tom (Adobe XD)

feature-started ·

AdminDemian Borba (Admin, Adobe) responded · May 02, 2016

The first iteration of Grids is shipped on our Public Preview 2 in April 2016. Stay tuned for more improvements! http://adobe.ly/xd for downloading it.

feature-started ·

Tom Krcha responded · March 17, 2016

Hi everyone,

I am currently investigating the rulers and the need for them. Since all of you voted for them, we’d like to understand more about how do you use rulers today or would like to use them in the future.

Let’s imagine a world, where you have guides, measurements, object distances displayed directly on the canvas in context of your current design (currently we have only the last one, distances for snapped objects), would you still need global rulers with global positions or those features mentioned are enough for you to operate successfully on canvas?

If you still need rulers if all these cases were satisfied, please let us know more about the needs and the ways you use them.

Thank you

Tom (@Adobe)

feature-started ·

joan_lafferty responded · March 14, 2016

We are currently working on this.

296 comments

Add a comment…

Your name

Your email address

Check!

invalid email

(thinking…)

Reset

or sign in with

UserVoice password

Forgot password?

Create a password

Signed in as (Sign out)

Submitting...

Anonymous commented · July 04, 2018 05:48 · Flag as inappropriate

Sorry Randy, but I disagree. At the moment it's impossible for me to add 40px outer gutters and get 12 columns which divide the rest of the space (8.33% each).

Will it result in columns that have half pixels? Yes. Is that how browsers work? Yep.
AdminRandy Edmunds (Admin, Adobe) commented · June 07, 2018 09:15 · Flag as inappropriate

Dwayne, whole numbers are enforced for all values so that all columns are pixel-aligned. Layout Grids that do not enforce pixel-alignment of columns (such as Bootstrap) result in artwork that can be blurry, or columns widths that are not consistent.

Geraberl, click on the "Linked margins" button to re-center the grid. The easiest way to go to next incremental amount of any field without breaking linked margins (i.e. uncentering) is to use Shift+up/down arrows in each field.
Geraberl commented · June 06, 2018 17:07 · Flag as inappropriate

Get this annoying off centered grid fixed NOW. I'm just trying to add 420 px equally to either side of the grid and it keeps shunting one side to 424 px. WHY?????
Shantikumar commented · April 19, 2018 01:57 · Flag as inappropriate

Thanks for this feature.
Dwayne commented · March 31, 2018 19:07 · Flag as inappropriate

Can we please get free-form grid settings? At the moment, when you set the size and number of columns, it automatically adjusts the measurements. This means I cannot, for example, replicate the Bootstrap Grid System because XD keeps on changing my numbers making it impossible to have control over my grid, column and content size.

Seriously, this needs to be fixed. This should work the exact same way that Sketch works. Or better still, the ability to have guides that we can manually position like we have in Photoshop like we had in Fireworks and other apps.
Bob Waite commented · March 26, 2018 16:46 · Flag as inappropriate

Grids are still randomly off center. Got a hard deadline for fixing this? I've been using Sketch and Figma but would like to keep my workflow in CC.
AdminRandy Edmunds (Admin, Adobe) commented · January 23, 2018 09:29 · Flag as inappropriate

> A global shortcut to hide/show the layout grid on windows.

Windows shortcut to Show/Hide Square Grid is Ctrl+' (single-quote).
Windows shortcut to Show/Hide Layout Grid is Shift+Ctrl+' .

Selection must be the artboard or anything inside the artboard.

Randy
Thibaud Van Vreckem commented · January 22, 2018 06:02 · Flag as inappropriate

This needs:
A global shortcut to hide/show the layout grid on windows.
A revision of how the grid displays when gutter width is set to 0: column should not be displayed, only borders and should be properly stylable
AdminRandy Edmunds (Admin, Adobe) commented · December 08, 2017 08:33 · Flag as inappropriate

> Is anyone having issues with their grid being off centered? The layout grid is a few pixels off center for me

We're working on fixing that. For now, you can manually increase left margin.

Hope this helps,
Randy
Casey commented · December 07, 2017 10:01 · Flag as inappropriate

Is anyone having issues with their grid being off centered? The layout grid is a few pixels off center for me
AdminRandy Edmunds (Admin, Adobe) commented · December 01, 2017 08:17 · Flag as inappropriate

> I must be doing something incorrect…
>
> Artboard: 1920 × 1080
> Calculated Layout Margin: 180px (each side)
>
> Desired Content Grid Width: 1560px
> Columns: 12
> Column Width: 110
> Gutter: 20
>
> Whatever I try, XD resizes, making it impossible to have a “divisible by 12, 10, 8, etc.” layout grid.
> Any ideas to fix this? I have wasted an hour on this…

Layout Grids are pixel-aligned, so 12 columns with 20px gutters don't come out to exactly 1560px. Keeping layout inside of 1560px, the closest settings will be to use 184px margins which result in 111px Column Width and 1552px content grid width.

Hope this helps,
Randy
John commented · November 30, 2017 10:00 · Flag as inappropriate

I must be doing something incorrect...

Artboard: 1920 x 1080
Calculated Layout Margin: 180px (each side)

Desired Content Grid Width: 1560px
Columns: 12
Column Width: 110
Gutter: 20

Whatever I try, XD resizes, making it impossible to have a "divisible by 12, 10, 8, etc." layout grid.
Any ideas to fix this? I have wasted an hour on this...
Victor Gondat commented · November 28, 2017 05:44 · Flag as inappropriate

Ok... I'm sorry, thanks.
Emir E. Uckan commented · November 27, 2017 02:47 · Flag as inappropriate

Thank you for this feature,

How to Turn On grids on XD : https://pasteboard.co/GVzvULK.png
AdminRandy Edmunds (Admin, Adobe) commented · November 25, 2017 08:40 · Flag as inappropriate

To enable "Show Layout Grid" menu command, first select the Artboard. If you have something selected in the Artboard, then you can use Cmd-Shift-' to display Layout Grid (even when menu command is disabled).

To change the number of columns, select the Artboard and use the Property Inspector.

Randy
Victor Gondat commented · November 24, 2017 11:35 · Flag as inappropriate

Hello,

I propose that you can activate a grid system based on 12 columns depending on the screen used on the work plan.
Add to menu: "Display > Grid in 12 columns"

Thank you for your wonderful work,

Victor
Anonymous commented · November 22, 2017 11:14 · Flag as inappropriate

Elaine ! If you don't really pay attentions to us SketchApp will take you over and all your Adobe Suits and don't forget Infinity is busy taking you Over as well and what is more Studio from Invision is gone to be a big break
trough so you better be Aware about it guys , you have lots of possibilities out there so please listen to us !
Steve Wages commented · November 22, 2017 09:55 · Flag as inappropriate

Really? This is pretty weak. No guides, no options- not much value to me at this point.
Paul commented · November 22, 2017 07:06 · Flag as inappropriate

Good. Baseline grid would be awesome - which leads to style sheets - at the moment they are better than Craft - but that may all change next month, so as everybody else im moving back and forth between XD and sketch seeing whos gonna win this. XD is a nicer tool to use, but come on guys - owners of InDesign!! give me the capacity to make some decent style sheets. To name styles, add HTML tags, padding/margins etc. Here you can ride miles above sketch/craft/invision
Keith commented · November 22, 2017 02:14 · Flag as inappropriate

Honestly this feels like the least you could get away with to mark the feature as complete!! After waiting so long (a year and a half!) what a disappointment - no guides, no baseline grid, not even an option to view the square grid at the same time to mimic a baseline grid. If Invision Studio manages to launch in January more feature rich then Adobe XD then sorry guys i think I've found my cross platform UI design tool.