レイアウトグリッドトークン — カラム、ガター、コンテナ幅トークン

デザイントークンとしてのレイアウトグリッド

レイアウトグリッドは従来、CSSフレームワーク（Bootstrap、Foundation）やFigmaのオートレイアウト設定で定義されていました。グリッドパラメータをデザイントークンとして表現することで、デザイナーと開発者の両方が参照する単一の信頼できる情報源を作成します。

コアグリッドトークン

:root {
  --layout-columns: 12;
  --layout-gutter: 1.5rem;
  --layout-margin: 1rem;
  --layout-max-width: 1280px;
}

コンテナトークン

異なるコンテンツタイプに対して複数のコンテナ幅を定義します。

グリッドトークンの使用

CSS GridまたはFlexboxレイアウトでグリッドトークンを適用します。

ブレークポイントトークン

ブレークポイント自体もトークンにできますが、CSSカスタムプロパティはメディアクエリ条件では使用できません。ツールやドキュメント用にトークンファイルに保存します。