Grids

Most sites on the internet, and every Munroe site, run on a 12 column grid. Laying a website out like this helps tremendously when making it responsive between desktop sizes, tablet sizes and mobile sizes. A 12 column grid can be divided by 1, 2, 3, 4, 6 and 12. So it is very flexible.

We can develop modules that do not fit with the grid, like a group of images arranged in a ‘masonry’ layout, however there needs to be a user based or UX based reason for doing so. Module row width should remain consistent from desktop screens to mobile screens. If a row is full-width on desktop screens (content in the row touches the edge of the screen), that row should be full-width on mobile screens, and if a row has gutters on desktop screens (content in that row doesn’t touch the edge of the page), it should also have gutters on mobile screens.

Grids in Sketch

Our layout grid is based on a 12 column layout. Please see the sample artboards in the Website Project Sketch file that include the 12 column grid at default media breaks and popular screen sizes.

To get started using the grid in your project, copy and paste the layout settings from the sample artboards to your project artboards by using this plugin, or by copying the entire artboard. For guidance on how to install Sketch plugins, cick here.

When laying out designs on desktop sizes, you should be considering how sections will reflow on both mobile and tablet sizes.

Layout settings

@greater than 1024px in width:

  • Number of columns: 12
  • Gutter on outside: Yes
  • Gutter width: 40px
  • Max width: 1280px

@less than 1024px in width:

  • Number of columns: 12
  • Gutter on outside: Yes
  • Gutter width: 20px

@less than 900px in width:

  • Number of columns: 6
  • Gutter on outside: No
  • Gutter width: 10px
  • Max width: 700px

Toggle grid visibility

To view your current artboard grid in Sketch, click View from the top application bar on the right hand side. From the drop-down, select Show Layout.

Edit grid settings

To edit the grid on your artboard, select Layout Settings from the View drop-down.