How do I setup the 12 column grid for different viewports?
Paul recently had to design some screens for a prototype he was building. He wanted the prototype to run on his iPhone 6 so he added the iPhone 6 artboard to his document - Awesome! This gave Paul the correct viewport size for iPhone 6 (375dp) however it didn't show the GUI's 12 column responsive grid. So Paul has no way of knowing how to layout his screens.
Paul needed to set up the Layout grid in his Sketch file so it would replicate what our 12 column responsive grid would do at this viewport size (375dp).
The best way to achieve this for any viewport size is...
- Download the Chrome plugin called OSX Resizer
- Open Chrome and go to a GUI demo page
- Click the OSX Resizer button in the toolbar. This will open the demo page in little window with no browser buttons etc.
- Resize the little browser window to your desired viewport size. This will show you exactly how the 12 column grid will respond at this size.
- Measure the column and margin widths then enter the values into Sketch's Layout settings.
Done!
Here's a screen grab showing the demo page at 375dp wide. All Paul needs to do is measure the column and margin widths then enter the values into Sketch's Layout settings.
FYI - This is a great resource for common device metrics