Layout grid - set gutter width, margins, and column width independently
Editing gutter width automatically changes my margins to adjust to account for the static column size and changing gutter size. A similar thing happens when changing the column size. Other fields are getting auto set to some value when I don't want them to change. This means I'm not able to get the correct grid size at all.
It would be nice to set each one independently or have an option to lock in some values so I can eventually get the correct sized grid.
Dong-Hwan Kim commented
I believe what's confusing here is that this automatic changing behavior prevents user from entering the value of what is in user's head.
For example, I wanted page width of 1280, gutter width of 16, column width of 72, but not sure with margin width. The order of inputs on Grid Pane of XD goes from columns, gutter width, column width, then margin width respectively. I expected XD to compute margin width for me as I input the other values but what happened was it kept on changing the value of either gutter width or column width as I change the other.
I managed to figure out on how to set the values manually after seeing this post: https://community.adobe.com/t5/adobe-xd/grid-layout-linked-margins-change-to-different-margins-automatically/td-p/9869772?page=1
Randy says here: "Try setting Margins first, then setting Gutter and Column Width."
I absolutely had no idea to make gutter width of 16 and column width of 72 until I followed this approach. I think this is something which XD can improve on UX wise. The http://gridcalculator.dk/#/1280/12/16/120 that Simon shared below is rather clearer since it tells user what value is invalid and needs adjustment. Actually, I used this calculator to figure out the margins since Randy's solution above requires me to know margins first to input desired gutter and column width. This is not UX friendly at all.
Hope this gets improved in the near future.
Simon Iosif commented
I opened up a photo of a grid in Adobe XD and it was impossible for me to replicate it. Adobe XD seems to never do what I tell it to do when working with grids. Please... please take a look at tools that are already working, and implement a new way of working with Grid Layouts. Please take into consideration this ideea:
I've been trying for the past half hour to replicate a simple grid with specific measurements and it's simply impossible.
Rafael Silva commented
For more flexible control of the repeat grid, we would only enter the columns, rows and gutter, and as we scale the repeat grid it would make the calculations in percentages to determine the width/height of each column/row.
When this option was active on each axis, with any total width of the repeat grid, the last element of the list would never clip.
This would work even better when constrains are implemented for auto fitting of the elements inside the repeat grid.
Christoph Mauerhofer commented
Please provide the option to input the margin/gutter for a repeat grid in an input field in the right panel. Often this is quicker and more precise than only being able to do it by dragging with the mouse.
Also, the option to fix this distance, so that it does not change when the size of the repeated grid element changes, would be great!
Starting in Version 4, margins are always adjusted so that layout grid settings fill entire artboard.
To avoid this, the increment/decrement values for up/down arrow keys with Shift key for every layout grid setting are now synced to number of columns. For example, when editing linked margins for a 12-column grid, Shift+up increments each margin by 6 and decrements column width by 1. For an 8-column grid, linked margins are adjusted by 4.
What layout grid settings are you trying to set? What's the artboard width?