Qual é o propósito de ter calhas externas em uma grade responsiva?

O Sketch tem a opção de adicionar calhas externas à grade. Para que servem e qual seria um exemplo de uma situação em que são úteis?

Se você tiver apenas calhas internas, o conteúdo poderá parecer apertado dentro das bordas da página ou tela. Ao adicionar a calha externa, você cria um espaço para respirar entre as bordas do conteúdo e as bordas físicas, fazendo com que pareça que as coisas se encaixam mais confortavelmente.

Em mídia sem borda (papel, sinalização), também cria algum espaço de buffer entre o plano de fundo e o conteúdo, reduzindo o sangramento óptico e facilitando o foco.

As calhas externas criam uma margem fora de uma grade de layout, para que os elementos de imagem e texto não fiquem diretamente nas laterais das telas menores que a Largura total . Acho que Margins seria um termo melhor do que Gutter do lado de fora .

As outras respostas estão corretas, mas acho que elas podem estar perdendo sua pergunta principal:

Por que o Sketch precisa de calhas extras para lidar com telas pequenas?

Não faz. Você pode configurar sua grade para ser um pouco menor que a viewport (ou prancheta nesse caso). Por exemplo, calcule Total widthpara imitar uma coluna de 90% e deixe o centerbotão manipular as margens laterais.

A razão pela qual eu gosto de calhas externas no Sketch é porque me permite pensar no tamanho da janela de exibição (por exemplo, 1024) como um número inteiro. Entro no tamanho da janela de visualização completa e nas minhas especificações de grade desejadas (com calhas externas) e o Sketch faz as contas para manter o preenchimento que estou procurando.

Cenário sem calhas externas

Estou desenvolvendo um layout de tablet com 1024 de largura, então recuo e tento descobrir uma coluna principal que me deixe algum espaço extra para as margens laterais. Estou procurando uma boa grade de 12 colunas à moda antiga, espaçosas calhas de 32px, use a mesma no lado de fora e recebo aproximadamente 51px colunas com uma largura total de 960 ( (960-(32*11))/12). Isso é ainda mais útil se eu já tiver um ponto de interrupção difícil em mente.

Cenário com calhas externas

Para a mesma viewport 1024, talvez eu não tenha um ponto de interrupção difícil em mente. Meu objetivo é maximizar o dispositivo de destino. Por isso, concentro-me no preenchimento da grade que desejo e deixo flexionar para caber na viewport / prancheta. O Sketch faz as contas para mim, porque sou apenas um tipo de designer tolo. E você pode ver no exemplo abaixo, eu ganhei 2px por coluna porque o Sketch calcula calhas externas como o Bootstrap: 50% das calhas internas. Imagine o quão melhor será o mundo com mais 24 pixels no meu design!

O mesmo, mas diferente

Em ambos os casos, você pode obter o mesmo resultado. Tudo se resume a como você gosta de pensar sobre o espaço. E se você não gostar da meia sarjeta do lado de fora, deixe essa caixa desmarcada e role a sua. (No futuro, prevejo mais controle sobre essas margens externas.)

IIRC, essa convenção veio do Bootstrap (ou talvez da grade 960). Eu acredito que o Bootstrap ainda tem calhas externas, embora eu não escreva uma folha de estilo BS há algum tempo.