-max-sz
Lismには、コンテンツサイズ用のトークンとして--sz--{sz}（{sz} = xs, s, m, l, xl）が用意されており、それぞれに対応する-max-szクラスが用意されています。
| クラス名 | CSS変数 | 値 |
|---|---|---|
-max-sz:xs | --sz--xs | 400px |
-max-sz:s | --sz--s | 640px |
-max-sz:m | --sz--m | 880px |
-max-sz:l | --sz--l | 1200px |
-max-sz:xl | --sz--xl | 1600px |
full & bleed
さらに、-max-szクラスには以下のような特殊なプリセットクラスが用意されています。
| クラス名 | 説明 |
|---|---|
-max-sz:full | has--gutterの直下であれば、100%サイズにその余白を追加して、親要素のサイズいっぱいに広がります。 |
-max-sz:bleed | 最外側の is--container の幅まで広がります。本文幅やネストされた container を突き抜け、ページ全体の full-bleed 表現を実現します。is--container が祖先に存在しない場合は、ビューポート幅（100svi）まで広がる fallback として動作します。 |
DEMOページ
これらの-max-szクラスの挙動について、別ページで確認できますのでぜひご覧ください。