has--gutter（左右に余白を付ける）

has--gutter は、箱の左右に決まった量の余白を付けるクラスです。gutter（ガター）は、本の「ページの端の余白」のような意味の言葉です。

どんなときに使う？#

• ページの中身が、スマートフォンで画面の端にくっつかないようにしたいとき
• サイトのどこでも、左右の余白を同じ量にそろえたいとき

-px:30 のような padding（内側の余白）のクラスでも左右は空けられます。has--gutter は「サイト共通の左右の余白」専用として、別に用意されています。量を1か所で変えれば、使っている場所すべてがそろって変わります。

使い方#

左右を空けたい箱に has--gutter を付けます。

<div class="has--gutter -py:20 -bgc:base-2">
  <p class="-bd">1つめ</p>
  <p class="-bd">2つめ</p>
</div>

専用の変数#

1つの箱だけ変えたいときは、その箱で --gutter を書きかえます。

<div class="has--gutter -py:20 -bgc:base-2" style="--gutter: var(--s50)">
  <p class="-bd">左右の余白を広くした箱</p>
</div>

サイト全体の量を変えたいときは、--gutter--base を書きかえます。

-max-sz:full で端まで広げる#

has--gutter のすぐ内側の要素に -max-sz:full を付けると、その要素だけ左右の余白を飛び越えて、親の箱の幅いっぱいに広がります。画像や帯を端から端まで見せたいときに使います。

<div class="has--gutter -py:20 -bgc:base-2">
  <p class="-bd">ふつうの中身</p>
  <p class="-max-sz:full -bd">端まで広がる中身</p>
</div>

くわしくは 最大幅（-max-sz） で説明しています。

is--container といっしょに使う#

is--container と has--gutter を同じ箱に付けると、その箱のすぐ内側の要素の --sz--bleed が「コンテナ（is--container の箱）の幅＋左右の余白2つぶん」になります。式は calc(100cqi + var(--gutter) * 2) で、100cqi はコンテナの幅のことです。--sz--bleed は -max-sz:bleed が広がるときに使う幅です。

しくみ#

.has--gutter {
  --gutter: var(--gutter--base);
  padding-inline: var(--gutter);
}

padding-inline は、文字の進む向き（横書きなら左右）の内側の余白です。

React・Astro で書く場合#

<Lism hasGutter>
  <p>コンテンツ</p>
</Lism>

関連するページ#

• Trait Class ってなに？
• is--container（幅の基準になる箱）
• is--wrapper（中身の幅をそろえる）
• 最大幅（-max-sz）
• 余白（padding・margin・gap）