: What is the purpose of having outside gutters on a responsive grid? Sketch has the option to add outside gutters to the grid. What are these for and what would be an example of a situation

@Ravi4787994

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.



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!



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.

Vote Up Vote Down

@Holmes874

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.

Vote Up Vote Down

@Pierce403

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.

Vote Up Vote Down