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.
Tomas As commented
Ben Davidson THANK YOU!!!!
Ben Davidson commented
A very easy workaround is:
1. Set the number of columns to 1.
2. Set the column width to your desired width.
3. Set the number of columns to what you want.
Tomas As commented
Who the f... designed layout setup current way??? For F... half and hour trying to match print screened webs grind. Who the f.. cares how much of the space I will have at the ends of my layout. I want f... gutter number stay at what was written and column number same. F... F... F... this... copy Figma god damn...
I found a solution for a 12 column grid , I was trying to create a 1200px grid and I had a hard time to make this right , but I may have found a solution. I set my the 12 columns with 12px gutter width and 89px column width and the margins to 360 , this works also with 1080px / 12 columns grid as well you just have to use 12x gutter width.
Hope this helps. Good luck.
This needs to be fixed, with a left navgation i cant offset the grid to the middle like figma does etc
I agree with all previous comments – this is a needed feature for any web design project. A fixed width or max-width column layout is standard web design practice. The simplest solution for Adobe would be to intergrate a lock function, which would allow users to lock one or two of the parameters so the digits can't change. E.g. if you set the width and gutter, you should be able to lock them so they don't change, allowing the page margins to fluctuate accordingly. Or alternatively lock the page margins and allow the gutter or width to change.
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.