Layout Grid (Columns, Rows, Margins, Gutter)
Have an ability to display a grid/guides mainly for web design use cases.
Jasper Lepardo
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
293 comments
-
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
-
AdminRandy Edmunds
(Admin, Adobe)
commented
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
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
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
Really? This is pretty weak. No guides, no options- not much value to me at this point.
-
Paul
commented
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
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.
-
Ryan
commented
XD is taking way too long. Why couldn't all of these features have been added at the beginning? I don't think I'll ever even use the program at this rate.
-
Anonymous
commented
Great to have guides but would be really beneficial to have them more customisable as they are in the rest of the Adobe Suite, and would love to have the rulers/guides you can drag out.
-
Nuff
commented
YESSSSSSSS.
Happy to have this in any capacity. Looking forward to seeing the feature evolve.
