Lism CSS - container

is--container

is--containerを使用すると、その要素に contaner-type:inline-size を適用します。

is--container

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Lism CSSではコンテナクエリでプロパティを変更できる仕様になっていますので、 コンテナクエリの判定基準としたしたいラッパー要素にこのクラスを使用しておく必要があります。

is--wrapper

.is--wrapper クラスを使うと、内部のコンテンツ幅を制御できます。

is--wrapper has--gutter

.-contentSize:

.is--wrapper クラスは--contentSizeで内部のコンテンツ幅を制御できます。
.-contentSize:s|l クラスは、 --sz--s,--sz--lをセットできるユーティリティクラスです。

is--wrapper-contentSize:shas--gutter

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

is--wrapper-contentSize:lhas--gutter

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

is--wrapper--contentSize:320px

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

wrapper要素のネスト

is--wrapper は子要素の幅を変数で制御しているため、直下にネストすると子ラッパー自身の幅も（同じ変数名なので）影響を受けます。

is--wrapper has--gutter

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

is--wrapper-contentSize:s

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

コンテナクエリの挙動について

コンテナクエリの判定値は直前の親コンテナの幅になりますが、 .-contentSize:s|l は子要素の幅を制限しているだけで、自身の横幅は100%です。
つまり、コンテナクエリの判定値もこの100%サイズが基準となります。

以下の例では、コンテナ直下のdivのサイズは var(--sz--s) ですが、100cqw がそのSサイズになるのではなく、windowサイズと一致します。

is--wrapperis--container-contentSize:s

div

width: 75cqw を適用したBOX

↑ コンテナクエリの適用状態 : @sm~ @md~ @lg~

ここでのコンテナクエリの判定値( cqw )は、外側の緑色の点線で囲われたコンテナ要素のサイズです。

もし、内部の要素のサイズ（ここでは var(--sz--s)) を 100cqw となるようにコンテナクエリを内部のdivで使いたい場合は、コンテナ自身のサイズを明示的にSサイズにするか、もしくは、is--wrapper の内部にコンテナを配置します。

以下は、コンテナ自体のサイズを明示的に指定した例です。

is--container-max-w:s

div

width: 75cqw を適用したBOX

コンテナクエリ適用状態 : @sm~ @md~ @lg~

以下は、コンテナをwrapper内に配置した例です。

is--wrapper-contentSize:s

is--container

width: 75cqw を適用したBOX

コンテナクエリ適用状態 : @sm~ @md~ @lg~