Working with Grids in Adobe XD
The majority of websites are built based upon on a grid system especially with rise of frameworks such as Bootstrap. Designers will often design websites and systems based on a grid to aid in creating layouts and displaying content.
A structure (usually two-dimensional) made up of a series of intersecting straight (vertical,horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. – Wikipedia
After switching to Adobe XD a couple of months back for all my website and app design projects I soon found this really neat tool, a feature within the software that creates a grid based on the values you set. This allows you to set up a grid for your project without having to spend time creating the grid manually or importing an image of a grid. This gives you more control, faster, over the grid measurements in terms of how many columns it has and how big the gutter between the columns are.
To add a grid to an artboard in Adobe XD follow these steps:
Step 1: Select the artboard;
Step 2: On the left-hand side menu in the section called GRID, make sure the checkbox is ticked (this will show the grid);
Step 3: Change the values to create the grid you need for the project.
