コンテンツサイズ

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--container-container:mhas--gutter

Lorem content ...

is--fullwide

Lorem content ...

is--overwide

@propetry が有効なブラウザでは、直前のコンテナ要素が呼び出された位置を基準としたコンテナ幅(100cqw)まで広がります。

is--container-container:m

Lorem content ...

is--fullwide
Overwide
is--container
is--fullwide
Overwide
is--container
is--fullwide
Overwide
div
Overwide
div
Overwide

Lorem content ...

div
is--container.-maxW:

Lorem content ...

is--fullwide
Overwide