Layout Grid (Columns, Rows, Margins, Gutter)

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

2,351 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 · Mar 14, 2016 · Flag idea as inappropriate… · Admin →

feature-completed ·

AdminElaine (Adobe) (Admin, Adobe) responded · Nov 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 · Jun 2, 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 · Aug 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 2, 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 · Mar 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 · Mar 14, 2016

We are currently working on this.

300 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...

Hopeful user commented · September 22, 2018 1:25 AM · Flag as inappropriate

I actually keep screenshots(!) of values that work to get the grid I want (and I still have to settle, ignoring gutter size because it seems like a compromise I have to make...)

I have a degree in math, and still haven't figured out the logic behind setting this grid!!

I keep ignoring the shortcomings in XD (can't mirror an object, keyboard bugs, bad RTL support), but this one kills me.

I love your product, please make it less painful to use.
Anonymous commented · August 9, 2018 12:15 AM · Flag as inappropriate

The columns as are designed now are THE MOST annoying feature of the software. You change one value, other values change arbitrarily....I Have to change values several times, till I get the result I want.... Horrible experience
Anonymous commented · July 20, 2018 6:02 AM · Flag as inappropriate

The grid option is damn annoying because it keeps messing my values. You should make it an option to lock the values you don't want automatically altered.
Anonymous commented · July 4, 2018 5:48 AM · 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 7, 2018 9:15 AM · 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 6, 2018 5:07 PM · 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 1:57 AM · Flag as inappropriate

Thanks for this feature.
Dwayne commented · March 31, 2018 7:07 PM · 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 4:46 PM · 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 9:29 AM · 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 6:02 AM · 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 8, 2017 8:33 AM · 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 7, 2017 10:01 AM · 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 1, 2017 8:17 AM · 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 AM · 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 5:44 AM · Flag as inappropriate

Ok... I'm sorry, thanks.
Emir E. Uckan commented · November 27, 2017 2:47 AM · 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 8:40 AM · 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 AM · 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 AM · 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 !