Skip to main content
pattersonain
pattersonain
New Participant
February 9, 2018
Answered

Grid Layout

  • February 9, 2018
  • 5 replies
  • 7858 views

I having an issue with the grid layout feature, If I try to set a right and left Margin uniformly to 40, then it switches to individual and makes one side 50 rather than 40, it will allow 39 or 45 but not 40 ( there are similar issues with other numbers but that is just an example)

    This topic has been closed for replies.
    Correct answer Randy Edmunds

    > If I try to set a right and left Margin uniformly to 40, then it switches to individual and makes one side 50 rather than 40, it will allow 39 or 45 but not 40

    Layout Grid only allows whole number values so that columns are pixel-aligned.

    Hope this helps,

    Randy

    5 replies

    steveb12535271
    steveb12535271
    New Participant
    July 31, 2023

    I've discovered a workaround for this, although it might seem a bit idiotic. Here's how you can do it:

    1. Set the gutter width first.
    2. Skip setting the column width for now.
    3. Now, set the values for the left and right page margins.
    4. Manually resize your artboard by grabbing the bounding box. All the values will stay the same except the column width.
    5. Drag the artboard until you achieve the desired column width.
    J
    Josh26101428tua4
    New Participant
    October 12, 2022

    You guys just bought Figma. Please just make it work like Figma. 

     

    Designers and developers are most concerned with setting explicit margins and gutters.

    Column Width: Auto would be fine. 

      M
      Mạnh Hùng24323276y3hn
      New Participant
      June 8, 2022

      Column width should be fixed as auto or decimal. Margin 24px but in fact left 24px right 25px. I used 375px screen margin 24px gutter 24px not adjust manual. In Figma can do that.

      D
      defaultv5516unqg66j
      New Participant
      November 7, 2021

      Hey, Im currently working with grids, ive tried to transfere a doc from sketch into XD and want to replicate the grid settings below and i'm experiencing the same exact issue, 

       

      Sketch grid:
      Column 12

      Gutter 32

      Column width 68

      Margins 218 

       

      total 1164 px across.

       

      When i set my grid to the following in XD it just gets thrown out of balance and defaults to 67 column width.

      see below

       

       

      Id really like to be able to continue to use XD as the prototyping featues are great but this is thowing out the whole desgin, so may have to revert back to Sketch. is there a fix on this coming any time soon?

       

      Thanks

      Phil.

       

       

        Randy Edmunds
        Adobe Employee
        Randy EdmundsCorrect answer
        Adobe Employee
        February 12, 2018

        > If I try to set a right and left Margin uniformly to 40, then it switches to individual and makes one side 50 rather than 40, it will allow 39 or 45 but not 40

        Layout Grid only allows whole number values so that columns are pixel-aligned.

        Hope this helps,

        Randy

          phil.schmidt
          phil.schmidt
          New Participant
          December 8, 2020

          Hi Randy,

          I am struggeling with this also:

          The site I am designing for has a 12 column grid - each column has a width of 65px and the gap between columns is 30px. So if we sum this up we get (12*65 = 780) + (11*30 = 330) = 1110px

          But although this are all even numbers, XD won't let me set the columns to 65px AND gap to 30px. It always goes either 64/30px or 65/29px. What can I do to solve this?

           

          Thanks for your advice, 

          Phil

            phil.schmidt
            phil.schmidt
            New Participant
            December 8, 2020

            When looking further, it seems there is a collision with the grid offset - although the offset value comes last, it seems to override the other values.

             

            Thanks to this issue  I figured out how to solve it:

            You have to set either column or gap size to 0 and only set value for either 

            • column width + offset or alternatively 
            • gap width + offset
              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices