susy-sass - Susy で流体グリッドを挿入する

Question

問題なく使用して、次のグリッド レイアウトを複製できましたmath: static。ただし、流動的な幅を使用したいので、次のブレークポイントで変更する前に、小さな画面でデザインが縮小されます。

またはを使用して に切り替えてmath: fluid行を挿入しようとすると、% 幅が縮小し、グリッドが正しく整列しなくなり、各ブロックのサイズが異なります。margin-leftpadding-left

これは流体グリッドで行うことができますか? パーセンテージでは無理そうですが、他の単位ではどうでしょうか。マージン/パディングが % 幅に違いをもたらしたことに驚きました。使用するbox-sizing: border-boxと、それらは「表示された」サイズの内側にあると想定されていたからです。

この問題のデモはhttp://sassmeister.com/gist/83526e7319203138ace1にあります。

ありがとう！

Answer 1

はい、可能です。contextあなたの現在の問題は、Susyの誤解から来ています。使用するボックスのサイズに関係なく、%幅は利用可能なスペースに比例します。スペースを削除する場合 (親要素のマージンまたはパディングを使用)、その新しいコンテキストを子に渡す必要があります。したがって、ブロックはすべて同じコンテキストにあるわけではなく、13現在渡している列の完全なルート コンテキストにはありません。

レイアウトを実現するにはさまざまな方法がありますが、sassmeister gist を分岐して、どのように行うかを示しました。私のソリューションでは、一番上の行の2.5-column両側に余白があり、8列のコンテキストが残ります。一番下の行には1-column両側に余白があり、11列のコンテキストが残ります。