Skip to content
← Adobe XD: Feature Requests (Read-Only)

Request details

Adobe XD: Feature Requests (Read-Only): 01 : Design mode

Categories

(thinking…)

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.

23 votes

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Dan shared this idea  ·   ·  Report…  ·  Admin →

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Phil Schmidt commented  ·   ·  Report

    Also had a big struggle with this one. Thanks to the comment by anonymous from September 17th, I was finally able to understand/fix this for my case.

    Indeed it is very unintuitive right now as the calculation of column+gap pairs is depending on the offset value - which comes last and therefore is expected to calculate dynamically.

    It would be good if there was some hint on this behaviour or if the user would be able to choose *which* values would be calculated *automatically*

    (Linked the solution in this help forum issue here: https://community.adobe.com/t5/adobe-xd/grid-layout/m-p/11659929#M42170)

  • Anonymous commented  ·   ·  Report

    I figured it out! You need to put 0 in the section underneath the column width dimension

  • Carsten Lund Thomsen commented  ·   ·  Report

    This has been driving me nuts! A simple solution would be an option to have the margin be calculated automatically in stead of dynamically. That would save me tons of time getting the margins right!

  • Dong-Hwan Kim commented  ·   ·  Report

    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  ·   ·  Report

    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:
    http://gridcalculator.dk/#/1200/12/24/0
    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  ·   ·  Report

    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  ·   ·  Report

    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!

  • AdminRandy Edmunds (Sr. Computer Scientist, Adobe) commented  ·   ·  Report

    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?

    Thanks,
    Randy