Layout Grid (Columns, Rows, Margins, Gutter)
Have an ability to display a grid/guides mainly for web design use cases.
jsprlprd
shared this idea
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
310 comments
-
mathias
commented
The way the artboard Column Grid settings attempt to intelligently adjust each other as you enter values is extremely irritating, not to mention dysfunctional. Cannot believe this got approved as is. Yeah, I understand it works sometimes, but when it fails, wow does it fail hard.
I am unable to replicate a column grid I've been using in Photoshop which I know for a fact is pixel perfect and mathematically correct. I change one value and XD decides which of my other inputs is "wrong". Rarely encountered a ui that does something like this.
___
Clearly, the XD team is very concerned with coming up with new modern intuitive ui features so XD can look like the cool new kid on the block, but this is a huge blunder. Dare I say, a classic form-over-function mistake. Please solve (LOL yeah right).
-
Kartik Iyer
commented
The currently implemented grid is a joke! How on Earth is this feature even remotely complete?! I try creating a measured 12-column grid and XD forces it's personal favourite grid on me. I mean what the heck?!
Why am I not allowed to create a 12-column grid with overall grid width of 1170px (excluding left and right margin of 15px each to make it a 1200px grid, for example) — each column being of 70px and gutter being 30px respectively?!
70px * 12 columns = 840px
30px * 11 gutters = 330px
Total width = 1170px
Why on Earth is this not a feasible grid on XD?
-
Kjell Ruben Strøm
commented
For now. This tip from Randy was awesome.
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.
-
Anonymous
commented
I just don't understand why this isn't fixed yet? It's feb 2019 and the same issue is still in the app. The Grid System if BROKE! What more do you need to see or hear?
Sketch and other Adobe products do this just fine.
Please give us what we want... at $600+ or so a year for a subscription. I think we deserve a grid feature that works.
-
Paul
commented
I have to say that the current layout grid feature in XD is by far the worst I have ever used! For a tool that is aimed at pro UI/UX designers how can you not get this simple feature correct? Sketch gets this right with the ability to set baseline grids with the horizontal grid. For all the features Adobe copies from others, why not copy this one?
-
Andrew
commented
Tom, you're absolutely right. This implementation is very flawed. I get so frustrated when I use it, half the time I give up and forget it.
-
Tom
commented
How is this feature complete? And how are more people not complaining about it in its current state?
Off centre grids? Yeah thanks
Try to add equal margins either side results in the other being changed automatically to the wrong width??
What the hell is this?
1900px document
I want a 1300px grid with 30px gutter.
1900 - 1300 = 600
600 / 2 = 300
Margin left 300 and then margin right automatically changes to 310?
Grid becomes off centre and 1290???
What the hell lol
-
Chris
commented
I'm surprised this user provided so many images showing how this SHOULD work, yet the grid system we have now was what was implemented instead.
Just look at his image "Grid_System.jpg" - it clearly shows a PS grid (very Sketch-like, or you could say the Sketch one is a copy of PS) - yet we have an unlabeled grid system with no guide lines and no ruler.
-
Chris
commented
If you want to know how grids and alignment should work in XD, just look at Sketch.
The ability to have an actual measurement grid which scales with zoom and measures by pixel is invaluable.
The best part of this tool is the ability to add a red line marker so that items can easily be aligned across multiple artboards.
While Sketch has a number of features that XD doesn't, this is the primary feature that I miss when using XD.
-
Tim Rice
commented
Randy, I agree that not having things pixel-aligned results in blurred lines. It makes perfect sense to design to a pixel-based grid when designing icons. However, we aren't just designing icons, we are designing form fields and responsive layouts.
A ton of sites use the bootstrap grid system and designers need to be able to design for that because otherwise we are forced to give designs to developers that don't match how it will actually appear in browsers.
Also, there are cases where I need to nest a grid within a grid (ex. A grid for a panel that is nested inside my page grid). If XD is automatically updating my margins to force pixel alignment, I either end up with uneven alignment in my panel or a panel that isn't aligned to my page grid.
I hate seeing designers voice how XD could help them solve their problems better, only to be told that we shouldn't be solving those problems (i.e. Bootstrap doesn't align to pixel so you should use a different grid system). These problems do exist, and XD will either enable us to solve them, or do a mediocre job of trying to solve them for us.
-
Hopeful user
commented
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
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
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
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.
-
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
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
Thanks for this feature.
-
Dwayne
commented
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
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.
-
> 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
