レスポンシブグリッド上に側溝を設置する目的は何ですか？

スケッチには、グリッドに外側の樋を追加するオプションがあります。これらは何のためにあり、これらが役立つ状況の例は何ですか？

内部ガターのみがある場合、コンテンツはシートまたは画面の境界内で窮屈に見えるかもしれません。外部ガターを追加すると、コンテンツのエッジと物理的なエッジの間に通気スペースができ、より快適にフィットするように見えます。

ボーダレスメディア（紙、看板）では、背景とコンテンツの間にいくらかのバッファスペースを作成し、光学的なにじみを減らし、焦点を合わせやすくします。

外側の余白は、レイアウトグリッドの外側にマージンを作成するため、画像とテキストの要素は、[ 合計の幅]よりも小さい画面の側面に直接くっつきません。マージンは外側のガターよりも良い言葉だと思います。

他の答えは正しいですが、私はそれらがあなたの主な質問を欠いているかもしれないと思います：

小さな画面を処理するためにSketchに余計な溝が必要なのはなぜですか？

そうではありません。グリッドをビューポート（またはこの場合はアートボード）よりわずかに小さく設定できます。たとえばTotal width、90％の列を模倣するようにを計算してから、centerボタンにサイドマージンを処理させます。

私がSketchの外溝を好む理由は、ビューポートサイズ（例：1024）を整数として考えることができるからです。フルビューポートサイズと希望のグリッド仕様（外側のガターを使用）を入力すると、Sketchが計算を実行して、後のパディングを維持します。

外溝のないシナリオ

幅1024のタブレットレイアウトを開発しているので、一歩下がって、メインカラムを見つけて、余白用に余分なスペースを残してみます。私は古き良き12列のグリッド、32pxの広いガターを使用し、外側にも同じものを使用します(960-(32*11))/12。合計幅が960の約51pxの列が得られます（）。すでにハードブレークポイントを考えている場合は、さらに便利です。

シナリオと外の雨どい

同じ1024ビューポートの場合、ハードブレークポイントを考えていません。私の目標は、ターゲットデバイスを最大化することです。だから私は私が望むグリッドパディングに焦点を合わせ、それをビューポート/アートボードに合うようにフレックスさせます。スケッチは私のために計算を行います。なぜなら、私は愚かな頭のデザイナータイプだからです。下の例では、SketchがBootstrapのような外側の樋を計算しているため、1列あたり2pxを得ています。内側の樋の50％です。私のデザインに24ピクセル追加すると、世界がどれほど良くなるか想像してみてください！

同じだが違う

どちらの場合でも、同じ結果が得られます。それはあなたがその空間についてどのように考えたいかにかかっています。そして、もしあなたが半分の溝の外側のパディングを好まないなら、そのボックスのチェックを外したままにして、あなた自身を転がしてください。（将来的には、これらの外側のマージンをさらに制御することを期待しています。）

IIRC、この規則はBootstrap（または多分960グリッド）から来ました。しばらくの間BSスタイルシートを作成していませんが、Bootstrapにはまだ外部の溝があると思います。