7

Sketch has the option to add outside gutters to the grid. What are these for and what would be an example of a situation where these are useful?

enter image description here

Improve this question
1
  • presumably this just means that the gutter width is not included in the column width, so from your pic: "outside gutter," 2 cols would measure 145px but with "inside gutter," 2 cols would measure 120px (?)
    – Yorik
    Dec 2, 2015 at 17:18

3 Answers 3

Reset to default
6

enter image description here

If you only have internal gutters, the content might seem cramped within the borders of the sheet or screen. When you add the external gutter, you create some breathing room between content edges and physical edges, making it look like things fit more comfortably.

On borderless media (paper, signage) it also creates some buffer space between the background and the content, reducing optical bleed, and making it easier to focus.

Improve this answer
3

Outside gutters create a margin outside of a layout grid, so that image and text elements will not stick directly to the sides of screens that are smaller than the Total Width. I guess Margins would be a better term than Gutter on the outside.

Improve this answer
1
  • Notice this in the question: "on a responsive grid?" I think Ben understands how to keep things off the side of the viewport. The problem isn't "what are they" it's "why do you need them in Sketch".
    – plainclothes
    Dec 7, 2015 at 16:21
3

The other answers are correct, but I think they might be missing your primary question:

Why does Sketch need extra gutters to handle small screens?

It doesn't. You could set your grid up to be slightly smaller than the viewport (or artboard in this case). For example, calculate the Total width to imitate a 90% column, then let the center button handle the side margins.

The reason I like outside gutters in Sketch is because it allows me to think of the viewport size (eg 1024) as a whole number. I enter the full viewport size and my desired grid specs (with outside gutters) and Sketch does the math to maintain the padding I'm after.

Scenario without outside gutters

I'm developing a tablet layout at 1024 wide so I step back and try to figure out a main column that will leave me some extra space for side margins. I'm going for a good ol' fashioned 12 column grid, roomy 32px gutters, use the same on the outside and I get approx 51px columns with a total width of 960 ((960-(32*11))/12). That's even more useful if I already have a hard breakpoint in mind.

Manually configuring padding in Sketch's layout grid settings

Scenario with outside gutters

For the same 1024 viewport, I may not have a hard breakpoint in mind. My goal is just about maximizing the target device. So I focus on the grid padding I want and let it flex to fit the viewport/artboard. Sketch does the math for me, cause I'm just a silly headed designer type. And you can see in the example below, I gained 2px per column because Sketch calculates outside gutters like Bootstrap: 50% of the inside gutters. Imagine how much better the world will be with 24 more pixels in my design!

Using Sketch's outside gutters to calculate padding

The same but different

In either case, you can get the same result. It just comes down to how you like to think about the space. And if you don't like the half-gutter outside padding, leave that box unchecked and roll your own. (In the future, I anticipate more control over those outer margins.)

IIRC, this convention came from Bootstrap (or maybe the 960 grid). I believe Bootstrap still has outside gutters, though I haven't written a BS style sheet in a while.

Improve this answer
4
  • 1
    "You could set up your grid to always be slightly smaller than the viewport". That's what an outside gutter is.
    – PixelSnader
    Dec 2, 2015 at 17:37
  • It's two different ways of getting there: • Design a grid that's n smaller than the viewport OR • Design a full width grid with outside gutters.
    – plainclothes
    Dec 2, 2015 at 17:40
  • 1
    I'm not attaching the wheel to the car, I'm attaching the car to the wheel. The question is "why would I need these", the answer is outer padding, whitespace, gutter, or whatever slight semantic variation you wanna throw at it.
    – PixelSnader
    Dec 4, 2015 at 7:00
  • The answer is so you can think about the grid to viewport relationship slightly differently. That's all, no cars or wheels required.
    – plainclothes
    Dec 4, 2015 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.