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
303 comments
-
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.
-
AdminRandy Edmunds
(Admin, Adobe)
commented
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.
-
AdminRandy Edmunds
(Admin, Adobe)
commented
> 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
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
> 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
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
> 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
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: 20Whatever 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
Ok... I'm sorry, thanks.
-
Emir E. Uckan commented
Thank you for this feature,
How to Turn On grids on XD : https://pasteboard.co/GVzvULK.png
