-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 として動作します。 |
ブレイクポイント指定
max-szはブレイクポイント対応のProperty Classです。wやmax-wと同じく、配列またはオブジェクト形式で画面幅ごとに値を切り替えられます。HTMLで直接書く場合は-max-sz_{bp}クラスと--max-sz_{bp}変数のセットで指定します。
<Box max-sz={['s', 'm', 'l']} /><Box max-sz={{ base: 's', md: '720px' }} /><div class="-max-sz:s -max-sz_sm -max-sz_md" style="--max-sz_sm:var(--sz--m);--max-sz_md:var(--sz--l)"></div>ブレイクポイント値として使えるのは、サイズトークン（xs〜xl）と任意の長さ値です。fullとbleedはmax-inline-size以外にinline-sizeやmargin-inlineも書き換える特殊クラスなので、ブレイクポイントで切り替えることはできません。
- ブレイクポイント値に
full/bleedを渡しても効きません。 - base値が
full/bleedの要素にブレイクポイント値を重ねると、margin-inlineなどが残ったまま幅だけ変わり、レイアウトが崩れます。
DEMOページ
これらの-max-szクラスの挙動について、別ページで確認できますのでぜひご覧ください。