Layout grids: everything you want to know

Photo of Christian Krammer

by Christian Krammer on

Shortcut: ctrl + L

Note: The term “grid” is used quite ambiguously in Sketch, because it describes the mesh of intersecting vertical and horizontal lines. In turn, the traditional grid with different columns that you might know from web or print design goes by the name of “layout.” To prevent confusion, the latter will be mainly called “layout grid” or “column grid” in the course of this article.

Sketch makes it very easy to build a grid, because this functionality is an integral part of the application. No need for add-ons or quirky templates. To set up such a column-based layout grid, click on “View” in the toolbar and select “Layout Settings…”, which will open a massive dialog with various settings. Be sure that an artboard is selected before; otherwise, you would be setting up a general layout grid. Going forward, I will not only show you how to create a grid of “Columns” but also define a baseline grid (“Rows”). This further simplifies the placement of elements and prevents arbitrary spacing.

Column grid

Let’s begin with the “Column” grid. The starting point is the “Total Width” because it sets how much space should be available for the different columns. To have some kind of safety zone, I always set my content to about 94% of the page’s total width. Let's say we have a page width of 768px (the width of a typical tablet in portrait orientation), which gives us a value of “722px” for the first input field. Feel free to let Sketch do the math and enter “768 × 0.94.”

The “Offset“ can come in handy, if you want to create a left-aligned design, where the grid should only occupy a part of the available space, but have a certain spacing from the left. However we are aiming for a centered layout grid and let the “Center” button align it to the middle of the artboard. The second determining factor for a layout grid is the “Number of Columns”. To have enough options for the placement of elements, I have chosen “12” here.

Based on the type of gutters you want to use in the development phase, you need to set “Gutter on outside”. Select the checkbox if this spacing should be evenly distributed before and after each column. Bootstrap, for example, handles it like this. In case the gutters should be before (or after) the columns as a whole and removed at the first (or last) column, leave this setting switched off. This is also the approach we will be taking.

Comparison of a grid with 'Gutter on outside' on and off
Top: If you set 'Gutter on outside', then the gutter [light red] will be evenly distributed left and right of each column. Bottom: Or else, the gutter will be added after the column but removed at the last one.

After we have defined the available space for the layout grid, we will set how it should be distributed across gutters and columns now. These values are directly related; one changes when you adapt the other. My preferred setting for a layout grid is to have gutters that are about one third the size of the columns. Unfortunately, Sketch lets you set neither relative percentage values here nor at the “Total Width”, so we have to do the math ourselves.

Because we have about 60 pixels available per column (722 ÷ 12), we just need to divide this by 4 (3 parts for the columns, 1 part for the gutters), which gives us a “Gutter Width” of “15px.” The rest of about “46px” remains for the “Column Width”. Please note that this is just an approximation; Sketch will distribute the available space slightly different.

This gives us the final grid for our design at a width of 768px. If you need go to another screen width in a responsive context, 1024px for example, you just need to update the grid settings in the same way like described above. As soon as you reach a width, where the design shouldn’t occupy the whole space anymore, just apply the grid to this reduced part. For a screen width of 1920px for example it would only be feasible to use a width of about 1280px for the content, or else the line width of text could get too long. In this case only apply the grid to this “inner” width.

Row grid

With the Column grid set, let’s move on to the “Rows”, or baseline grid. Select this checkbox now. Things might seem a bit more unclear here, so let me give you a short introduction. The defining value is the “Gutter Height”, because the rows are just multiples of it. The bigger the “Row Height”, the larger the individual “blocks” you will get, each with the “Gutter Height” in between.

The best way to visualize the individual rows and gutters is to check “Draw all horizontal lines”, which will show all individual rows independent of the different blocks. However, if you just need the blocks, don’t check this setting. For a simple baseline grid, leave the “Row Height” at “1” and let the “Gutter Height” define the baseline. A good setting for a targeted font size of 16px would be "12px". If we multiply this value by two, this gives us a nice line-height of “1.5” (12 x 2 = 24 / 16 = 1.5).

Finally, choose a red with “20%” opacity for the “Light” color of our grid. If you prefer to show the grid lines only, without solid fills for the columns, select “Stroke Outline”, whose color can be defined with the Dark color. A click on “Make Default” takes these settings for all future artboards. After you confirm everything with “OK”, you will see the grid in its full beauty. You can now switch it on and off with ctrl + L.

Screenshot of Sketch, which shows the finished grid