0

最大幅でこれらの値を持つ流体グリッドを作成しようとしています:

http://gridcalculator.dk/#/1224/12/40/56

ブラウザーのサイズを 1264 ピクセル未満に変更すると (本体に 20 ピクセルのパディングを許可するため)、すべて (余白、ガター、および列) が比例して縮小されます。これは可能ですか？

私はこれらのアプローチを試しました：

初挑戦：

$total-columns  : 12;
$column-width   : 56px;
$gutter-width   : 40px;
$grid-padding   : 56px;

パディングが 56px に固定され、縮小されないため、これは機能しません。

2 回目の試行:

$total-columns  : 12;
$column-width   : 4.575163%;
$gutter-width   : 3.267973%;
$grid-padding   : 4.575163%;

$container-width: 1224px;

これはほとんど機能しますが、何らかの理由でグリッドのパディングが列の幅よりも大きくなっています...

私は何が欠けていますか？ありがとう！

4

1 に答える 1

0

Susy 1.0は、列や側溝とは異なる方法でグリッドパディングを処理します。あなたが探しているものを達成するために、私たちは行の最初と最後の要素の両方に特別なクラスを要求する必要があります。これがSusy0.9の仕組みですが、ほとんどの人が不満を言っている機能に多くの複雑さが加わりました。現在、要素ではなくグリッドパディングがコンテナに追加されているため、必要なことはできません。

グリッドパディングは、計算なしでコンテナに直接追加されるようになりました。最初の例では、それは曲がらないことを意味します。2番目の例では、ブラウザによってビューポート全体のパーセンテージとして解釈されますが、ガターはコンテナのパーセンテージであるため、幅が異なります。

于 2012-12-30T16:35:16.107 に答える