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.
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,
The grid show on top of everything no? Is not a way of put it behind things?
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
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.
Doesn't setting the left and right margins to 0 achieve this? If not, can you provide more details?
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.
[Deleted User] commented
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.