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. The layout and grid settings you use in Sketch are something you have to create yourself.
Sketch layout and grid settings

The most important thing in regards to 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 align your layouts and grids with most of the common screen sizes available today. We’ll talk more about what screen sizes these are later.

Table of Contents

How to change layout settings in Sketch

Before we dive into recommended Sketch layout and grid settings we first have to make a list of the settings we have available in Sketch and how we get there. 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.
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 select 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 a number of settings you can play around with. These include the following.

  • Total width.
  • Offset.
  • Number of columns.
  • Gutter width.
  • Column width.
  • Gutter height.
  • Row height.

This looks 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 change 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, making use of 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, medium is used for tablets, and everything from large and up is used for desktop devices. Sketch has a nice feature where you can create artboards depending on these breakpoints. This will greatly help you with your layout settings. Pick a column width that fits the device type you’re creating 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 offset that is equal on both sides of the Sketch layout.

Number of columns, column width, and gutter width

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

The interesting thing about the aforementioned widths is that you can divide them all by 12. If you add line-heights of 24 and padding of multitudes of 12, you’re looking at your first grid. All of these can be set using Sketch. 12 is truly 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. 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.

Sketch layout and grid template

Layout and grid settings give a designer a lot of options in regards to setting up a project in Sketch. To help you out, we’ve created a template that includes common breakpoints, layout settings, examples, and best-practices. Our template is also compatible with Adobe XD.

We have two versions available for you to choose from. Take a look at the template below.

Sketch Layout and Grid Template header
This is what the Sketch Layout and Grid Template (Pro) looks like.

Frequently asked questions

As with many of our posts, we finish this post with a number of 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.

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.

This 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, it can have two explanations 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 you open 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 great 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.

Nick Groeneveld

About the author

Nick Groeneveld is a designer from the Netherlands with over 5 years of UX, visual design, and consultancy experience. He has worked in many different industries, including retail, finance, and sports.

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

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