コンテンツサイズ一覧

-max-sz:xl
-max-sz:l
-max-sz:m
-max-sz:s
-max-sz:xs

-max-sz:full

-max-sz:full は、基本的には 100% ですが、親が has--gutter を持っていても全幅に広がります。

is--wrapperhas--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.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

-max-sz:full

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.

div

↓親要素(ここではdiv)を飛び越えることはありません。

-max-sz:full

-max-sz:container

@propetry が有効なブラウザでは、先祖コンテナ要素が呼び出された位置を基準とした幅 (100cqi)まで広がります。
また、コンテナにhas--gutterがある場合はその分を加算します。

フルブリードレイアウトなど、親要素を飛び越えて外側まで広げたいコンテンツに活用できます。

is--wrapperis--containerhas--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.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

-max-sz:full
-max-sz:container
div
-max-sz:full
-max-sz:container
is--container
-max-sz:full
-max-sz: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.