Request details

Define layout grid by total width

The new layout grid is great, however: it would be useful to be able to define the total width of the layout grid with a single value. Right now you adjust it indirectly by defining the margins on either side of the grid system, which is less than useful, especially for web design.

57 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Benjamin Alexander Byriel shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

20 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...
  • Anonymous commented  ·   ·  Flag as inappropriate

    Driving me nuts!!!! I need to setup a grid (1170xpx) but want to have the screen size wider to show backgrounds etc on the design. This is so difficult to try and set up. :(

  • Bart commented  ·   ·  Flag as inappropriate

    Defining grid layout is a nightmare! I change one value (column with for example), and all the other values change unpredictably. I agree: margins do not matter. Keep the grid layout centred and allow to manipulate it by changing column and gutter width. The margin is what left divided by two. Would be also nice if the grid can be defined by percentage, not only by virtual pixels.

  • AdminRandy Edmunds (Software Engineer, Adobe) commented  ·   ·  Flag as inappropriate

    @Jeff This is great feedback. Thanks.

    For now, set the Gutter Width first. Second, click the "Linked left/right margins" button if grid is not already centered. Then put focus in margins field, hold down Shift-key and use up down arrows to adjust the Column Width.

    > If it's a odd numbered grid size (which no one uses) give us an option to nudge it 1 pixel left or right.

    Click the "Different margin for each side" button to handle this case.

    Hope this helps,
    Randy

  • Jeff Swartz commented  ·   ·  Flag as inappropriate

    The layout grid is a must-have feature but in it's current state is practically useless. Unless you get lucky and it likes your values, you will not be able to enter what you want.

    Just now I need a 1366 artboard to have a 12-col / 70 px col / 30 px gutter layout grid. This is a standard 1170px layout (1200px if you add a half a column on edges, which also needs to be an option) but It keeps changing my values to fit margins, splitting the margins or whatever, changing what i've already input.. I literally can't get it to accept that I want 70/30 grid. It's infuriating.

    As someone else mentioned, a simple place to start is that NO ONE CARES ABOUT MARGINS. We might care about full layout grid width, BUT that should be calculated by inputing col/col-width/gutter-width. Why do i have to calculate margins tomake my grid fit? If it's a odd numbered grid size (which no one uses) give us an option to nudge it 1 pixel left or right. Stop changing my values.

    Test this. Over and and over until it actually works. Because it's pretty obvious you haven't. Right now, it is very inconsistant and doesn't work the way we need it to.

  • Vova Kowalski (ndeerz) commented  ·   ·  Flag as inappropriate

    > This one feature drives me nuts daily. Who cares about the margin?

    Totally agree. I've just spent 5 minutes brute-forcing this grid to set up three things: count of columns, gutter width, column width. I don't care about margins. However, I've calculated margin width manually, but I can not enter it avoiding changing gutter and column width to incorrect values.

  • David Balogh commented  ·   ·  Flag as inappropriate

    This one feature drives me nuts daily. Who cares about the margin? Just allow it to set the max width and column amount, then center and calculate. Give a way to offset it left or right (for left navs or a spec text area for instance).

  • Paul commented  ·   ·  Flag as inappropriate

    Why has this not been addresses in the latest update? Also add baseline grid to it!

  • Boni M Bo commented  ·   ·  Flag as inappropriate

    only 30 people want this? I have been using adobe products since I started in the business and this feature, or lack thereof has made me seriously consider trying out sketch.

  • Paul commented  ·   ·  Flag as inappropriate

    Yes agree. It seems odd to have to try and work out what margins are required to create the width of your grid. Why not just let us input the width of the grid? That would be so much easier!
    Its a bit annoying that a tool that is aimed at designers doesn't even let you use the most basic of features with ease.

  • Matt commented  ·   ·  Flag as inappropriate

    And have the option to center that grid on the artboard - to behave like a max-width grid that is so commonly used in web design

  • BjornNormann commented  ·   ·  Flag as inappropriate

    I'm with Benjamin on this one. With the current requirement to define left and right margins setting up the grid to mimic something like Bootstrap is tricky and time consuming. Simply defining the number of columns and the desired gutter width and total width of the grid, would make this so much easier.

  • Jeff Swartz commented  ·   ·  Flag as inappropriate

    Yes please. Hey devs go try to create a 1140 grid on a 1336 artboard. Its headache inducing and makes me want to throw XD across the room, the way values keep shifting. Its not helpful at all.

    Go look at a little Adobe Air app called Boks. It does a fairly good job allowing you to specify a desired overall grid width then offers column/gutter suggestions to use within. Chasing values around in XD is super annoying. We may live in a responsive world, but we still have to design in a static app.

  • AdminRandy Edmunds (Software Engineer, Adobe) commented  ·   ·  Flag as inappropriate

    > The grid show on top of everything no? Is not a way of put it behind things?

    Currently, layout grid is always displayed on top of everything. You can change the column color to make it more transparent. Note that if you set alpha to 0%, then only column borders are shown.

    Hope this helps,
    Randy

  • Anonymous commented  ·   ·  Flag as inappropriate

    The grid show on top of everything no? Is not a way of put it behind things?

  • Joe commented  ·   ·  Flag as inappropriate

    This feature would be really helpful as the layout isn't needed just for the whole page but also modals, widgets and other things, which is difficult to adjust the grid margins to get it to line up. I'm never able to get it to line up perfectly either.

  • Daniel Alves commented  ·   ·  Flag as inappropriate

    Is there any way to display the grid per component? Nowadays it's necessary to reposition the grid every time. This causes problems with using the specs.

  • Anonymous commented  ·   ·  Flag as inappropriate

    Please allow layout grids to flow the entire art-board. i.e 100% width not just centred. It's not an 'idea' just common sense and basically what you're competition is doing.

  • Pepijn commented  ·   ·  Flag as inappropriate

    Yes please! When working for bootstrap I often need to work with a pre-defined width (usually a break point). It would be extremely useful to use a total width as the base, within which I can define the number of columns, gutter width and column width. The value that is not specified should be calculated autmatically (in my case that is typically the column width).

    Even with the layout grids now available in Xd I'm still calculating those values to total a given width. Very tedious and, to be honest, very dissappointing that is hasn't been included right away.

Feedback and Knowledge Base