-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--gutterLorem 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:fullLorem 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--gutterLorem 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:containerdiv-max-sz:full-max-sz:containeris--container-max-sz:full-max-sz:containerLorem 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.