Home - Design Tools - Sketch Layout and Grid Settings

Sketch Layout and Grid Settings

With today's number of devices, the amount of screen sizes you have to design for grows also. Sketch has a lovely feature to help you out. It is called Sketch layouts and grids. Unfortunately, the layout and grid settings you use in Sketch are something you have to create yourself.
Sketch layout and grid settings

The most crucial thing about your Sketch layouts and grids is to align your settings with popular CSS frameworks like Bootstrap or Bulma. This way, you ensure a clear and easy handover with the development team of your project.

Another benefit of doing this is that you can align your layouts and grids with most of the typical screen sizes available today. We’ll talk more about what screen sizes these are later.

Table of Contents

In this post, we’ll discuss recommended layout and grid settings in Sketch and how to change them. The settings we recommend are in line with common frontend frameworks. To make things better, we’ve also created a template you can download to apply the settings we talk about to your project right away. 

Sketch layout and grid template

Layout and grid settings give a designer a lot of options for setting up a project in Sketch. To help you out, we’ve created a template that includes everything you need.

  • Common breakpoints.
  • Layout settings.
  • Examples and best practices.
  • Project starter page.
  • Compatible with Sketch and Adobe XD.

The Sketch layout and grid template is available on Gumroad for $4. Click the button below to check it out.

How to change layout settings in Sketch

Before we dive into recommended Sketch layout and grid settings, we first have to list the settings we have available in Sketch and how we get there. Next, here’s how you can change your Sketch layout settings.

  1. Open Sketch and open a (new) file.
  2. Go to the top menu.
  3. Select view, canvas, and finally layout settings.

You will now see a dialog with Sketch’s layout settings. Keep in mind that these only apply to the pages you have selected. If you want to work as efficiently as possible, we suggest setting your settings right away and selecting the ‘make default setting’ option at the bottom of the dialog.

Sketch layout settings

You will now see a dialog with Sketch’s layout settings. Keep in mind that these only apply to the pages you have selected. If you want to work as efficiently as possible, we suggest setting your settings right away and selecting the ‘make default setting’ option at the bottom of the dialog.

Recommended layout settings in Sketch

Once you’ve found your Sketch layout dialog, it is time to set up your settings. As you can see, the layout dialog in Sketch shows several settings you can play around with. These include the following.

  • Total width.
  • Offset.
  • The number of columns.
  • Gutter width.
  • Column width.
  • Gutter height.
  • Row height.

The list above makes it look like a lot at first but worry not. These layout settings are connected. By changing the total width and the number of columns, most of the other layout settings adjust accordingly. In some cases, you do not need to use rows. Because of this, you do not need to set the gutter height and row height.

Total width and offset

First, we’re going to set the total width of our Sketch layout. As we mentioned earlier, using popular CSS frameworks and device screen sizes will save you a lot of trouble. To do so, we’re going to set some breakpoints. Here they are.

  • Extra small: 360px.
  • Small: 576px.
  • Medium: 768px.
  • Large: 1080px.
  • Extra large: 1440px.

The small and extra small breakpoints are generally used for mobile devices. You can use the medium breakpoints for tablets. Everything from large and up is used for desktop devices. Sketch has a nice feature where you can create artboards depending on these breakpoints. It will significantly help you with your layout settings. For example, pick a column width that fits the device type you’re making a design for.

As for the offset, you can have Sketch calculate the offset by selecting the ‘center’ button in the layout dialog. By centering the layout, you create an equal offset on both sides of the Sketch layout. It is a best practice in UI design. So we can recommend doing this.

Number of columns, column width, and gutter width

Now that we have the total width and offset in place, we must look at the number of columns. For this example, we’re going for a maximum of 12 columns.

The exciting thing about the breakpoints mentioned above is that you can divide them all by 12. Add line-heights of 24 and padding in multitudes of 12. Congratulations, you’re looking at your first grid. You can set all of these using Sketch. 12 is indeed the magic layout number here.

If you set the number of columns to 12, you can always use multiple columns together to get to a lower amount of columns. Unfortunately, the other way around doesn’t work.
Set the gutter width to a multitude of 12 as well. We usually go for 24px. When you do, Sketch automatically calculates the column width to fit your other layout settings.

Frequently asked questions

As with many of our posts, we finish this post with several frequently asked questions that are related to the subject we’re talking about. In this case, we’re answering some Sketch layout and grid questions. Here we go.

How do I add a grid in Sketch?

Adding a grid in Sketch works almost the same as creating a layout. We’re going to assume that you already have a Sketch file open.

  1. Once again, go to the top menu of Sketch.
  2. Go to view, canvas, and finish by selecting grid settings.

Take a look at the following screenshot. This is the dialog you should have in front of you if you’ve followed these steps correctly.

How do I add a grid in Sketch?

As you can see, adding a grid to Sketch requires less user input than adding a layout. The only thing you have to add is the grid block size and the number of blocks until you add a thick grid line.

It is an easy process without any clear best practices. You can create a grid in Sketch to follow almost any rule as long as you’re being consistent.

How do you repeat a grid in Sketch?

Repeating a grid in Sketch is easy. However, repeating a grid can mean two things depending on what your goal is. Repeating a grid within one Sketch artboard is a feature of grids itself. That’s just what grids do.

If you want to repeat grids across multiple pages, you can set your grid settings by selecting multiple pages before opening the grid settings dialog. Another way would be to use a Sketch plugin like Craft.

How do I turn on smart guides in Sketch?

You can turn on smart guides in Sketch using one of two ways. Both of them are easy to accomplish. Here’s how you can do it.

  • Go to the View menu in Sketch. Select Canvas and ‘Show all guides.’
  • The second option to enable smart guides in Sketch is to right-click on one of the rulers and select ‘Show all guides’ from there.

Further reading

Having a clear layout and grid setup in Sketch can help boost productivity in a significant way. In addition to the settings we’ve just discussed, there are many more options you can apply to boost your work in Sketch. You can take a look at our list of Sketch plugins, for example.

About the author

Hi! I'm Nick Groeneveld, a senior designer from the Netherlands with experience in UX, visual design, and research. I have completed a wide range of projects in finance, tech, and the public sector.

Take a look at Nick's LinkedIn and Medium for more.

Was this post helpful to you? Share it with others!

Facebook
Twitter
LinkedIn