コンテンツサイズ

width: xl
width: l
width: m
width: s
width: xs

is--wide

親のコンテナ幅によってかわります。

is--container-container:s

Lorem content ...

is--wide
is--container-container:m

Lorem content ...

Lorem content ...

is--wide
is--container-container:l

Lorem content ...

Lorem content ...

is--wide

is--fullwide

is--fullwide は、親が has--gutter を持っていても全幅に広がります。

また、is--flow の直下で is--fullwide が連続すると、その間の余白は0となります。

is--container-container:mhas--gutter

Lorem content ...

is--fullwide
is--fullwide

Lorem content ...

div

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

is--fullwide

is--overwide

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

親要素を飛び越えて広げたいコンテンツに活用できます。

is--container-container:m

Lorem content ...

Overwide
div
is--fullwide
Overwide
div
Overwide
is--container
Overwide
div-maxW:s
Overwide
is--container-container:s
Overwide

Lorem content ...

div
is--container.-maxW

Lorem content ...

is--fullwide
Overwide