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.
Massao Takagi commented
@Randy Edmunds, that actually works pretty good - even when choosing unlinked margins.
In one case, e.g., I needed a grid 1140px large, gutters of 24px and columns of 73px, left margin of 100px.
I did as you said, started in gutter, then moved to left margin, adjusting it first. Then moved to the right margin, until the columns width were just right.
It's not the best solution, but at least I won't be moving to another product for now...
I'm about to switch back to Sketch. I can't even set basic 12 Columns 1140px Bootstrap grid with 30px gutter. Let me know if you find any solution. Would be much appreciated.
This is so frustrating.
Dustin Wood commented
Found this because I too was getting seriously frustrated with setting up a grid. Since responsive design pretty much uses a grid, I was surprised that this feature isn't more of a focus and easier to use.
My dev team uses a 1600px wide grid, with 12 columns, 30px gutter, columns around 101 - why can't I recreate this in XD?
Honestly, trying to switch to XD, but the features aren't as flexible as Sketch App.
aurora johansen-wardigo commented
OMG! This feature is a disaster!
I want to lock in an 41px grid column width w/ an 8px gutter as my defaults. My breakpoints are 320/640/960/1280/1600px respectively. XD keeps changing my column/gutter widths. I can't make this work at all.
Yes, I've done the math manually. Yes, I want the left over pixels to be added to the left/right offsets equally or as equally as possible. At the 1600 breakpoint, the offset turns into something bizarre: 0, 101, 0, 67.
41 col width x 30 cols = 1230px
8 gutter width x 29 gutters = 232px
Total col/gutter width = 1462px
Total offset pixels = 138px
Offset SHOULD = 69px
How is this difficult? Yet, it is absolutely impossible to enter these values and keep them. I ask you...W.T.F?
Christopher Sample, Studio LXV commented
1. Set art board width to desired layout grid width, mine is 1280px a great max width for modern screens, giving me a gutter 16px, I prefer numbers divisible by 8.
2. Make layout left and right margin 0 - (This sets columns full width)
3. Add lets say 400px (A) to total art board width now 1680px, then set left and right margins to 200px. (A / 2) to give your layout grid the perceived appearance its a website with max-width:1280px with 200px left over on the left and right margin of the viewport.
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. :(
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.
@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,
Jeff Swartz commented
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
> 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
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).
Why has this not been addresses in the latest update? Also add baseline grid to it!
Boni M Bo commented
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.
Caleb Zeringue commented
Please, this is making me go back to Sketch.
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.
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
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
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.
> 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,