In this tutorial, we’re going to learn how to create and use layout grids in Adobe XD.

✅ Get 15% off The Adobe Illustrator Masterclass: https://academy.dansky.com/opt-in

⬇️ Download unlimited photos, videos, templates, mockups, icons, fonts, brushes and more: https://1.envato.market/q5nq

❤️ Get better sleep, relaxation, and improve your mental health with free audio tracks: https://bit.ly/3y9sr5K

I also hang out here, come say hello!
Twitter: https://twitter.com/foreverdansky
Instagram: https://www.instagram.com/foreverdansky
Website: https://www.dansky.com

Some links may be affiliate links for products and platforms that power by business. I make money with these which helps support the channel, so if you do use them, thank you for being awesome!

source

50 Comments

  2. Hi, thanks for the video, any idea how to lock margins in place? When you change the gutter or column width it also adjusts the margins sometimes (as happened on your second edit to the grid here). In most cases you need the overall width of the grid to remain constant, on a per layout basis, and only want the column widths and gutter sizes to adjust. In this case you needed 375 as the left and right margins, but when you edited the grid the second time the margins jumped to 373 (widening your grid from your desired width). This happens to me all the time, and makes the tool a bit useless. I need it to adjust only columns and gutter, and when a value is not possible due to the constraints of the grid width, it should tell you and adjust accordingly. Is this issue solvable?

  4. I think it's more down to XD but this doesn't even work as when you set your grid and then draw a rectangle at 1170px wide the grid is 10 pixels short of it.

  5. 2021 and this feature still sucks.. Doesn't work like in this video. I can't set my grid to 16 columns, 20gutter with margins left and right to 160.. It keeps changing to different values for the margins and it is driving me nuts because the layout is not centered.. they should copy Figma for this feature

  11. Hi Dansky! I am designing a web in 1336 px and I need to know how to locate the 12 guides. Later, how can I know how to locate them correctly for mobile? Thank you =)

  17. NO ONE ON PLANET CAN EXPLAIN THIS TOOL. NO ONE, ABSOLUTELY NO ONE. every tutorial on youtube would feel like, as if someone is showing you a picture of an apple and trying to tell you how does it look like in the picture.

  25. This doesn't work for me, whenever I set the left / right margin XD then changes the value of the other margin by itself… meaning I can't get even left and right margins! very frustrating

  28. Hi Dansky, the video is pretty much helpful. Just one quick question, what is the perfect grid size we should take to design a website? Do reply. Thank you 😊👍🏻

  29. This grid tool is fundamentally flawed. The grid width here should be 1140px to account for margins, that is the max container width. The gutters should also stay at 30px (there are 11 of them). You can't fit in these dimensions with the column width constrained to a static whole number.The column width has to be 67.5px, but they make that impossible. This tool is useless. You might as well build your own grid.

  33. I HATE this grid tool. For some reason it seems to have a mind of his own. Once you start fiddling, it seems impossible to "reset" it. Like I decided to try with the Bootstrap settings you are showing and as soon as I set the left-right margins, it automatically goes on to apply 375 to the right and makes the left bigger than that… despite I have clicked on "Use default" to start with! Even creating a new file or restarting the program didn't do the trick >_<

  45. Hi Dansky Than you for beeing here. For some reason I don't have the same options in my Adobe XD as you have. "GRID" doesen't apear in right side, like in your previewing. How come it doesn't show up? I'd like to chance my bootstrap grid, and not have so much margin.

Leave A Reply

Please enter your comment!
Please enter your name here