1

isolate-grid()次のように、複数のブレークポイントで異なる設定を使用しようとしています:

マークアップ:

<div class="boxes">
  <div class="box">
    Box 1
  </div>
  <div class="box">
    Box 2
  </div>
  <div class="box">
    Box 3
  </div>
  <div class="box">
    Box 4
  </div>
  <div class="box">
    Box 5
  </div>
  <div class="box">
    Box 6
  </div>
</div>

サス:

$total-columns: 4;
$column-width: 60px;
$gutter-width: 40px;
$grid-padding: $gutter-width / 2;
$container-style: fluid;
$container-width: 940px;

%container {
  $include container;

    @include at-breakpoint(9) {
      @include set-container-width;
    }

    @include at-breakpoint(12) {
      @include set-container-width;
    }
}

.boxes
  @extend %container;

  .box {
    @include isolate-grid(2);

    @include at-breakpoint(9) {
      @include isolate-grid(3,9);
    }

    @include at-breakpoint(12) {
      @include isolate-grid(4,12);
    }
  }
}

ただし、列スパンが期待どおりに調整されても、オメガが正しくリセットされないように見えるため、一部のボックスがクリアされて同じ行に表示されません。

私は明らかな何かを見逃していると確信していますが、私は何年も前からぐるぐる回っています! reset-omega()andのさまざまな組み合わせを追加しようとしましreset-columns()たが、まだ喜びはありません。

私を悲惨な状況から解放するためのアイデアはありますか?!

よろしく、

マット。

4

3 に答える 3

1

これは本当に良い点です。clear: none;次のブレークポイントで右の n 番目のセレクターを使用してオーバーライドを簡単に追加できるはずです。Susy は、Xn + 1「X」が行の項目数である形式を使用します。あなたの場合、これでうまくいくはずです：

.boxes {
  @extend %container;

  .box {
    @include isolate-grid(2);

    @include at-breakpoint(9) {
      // 2n + 1 because the smaller grid had 2 items in each row
      &:nth-child(2n + 1) { clear: none; }
      @include isolate-grid(3,9);
    }

    @include at-breakpoint(12) {
      // no override needed, because the smaller grid also had 3 per row
      @include isolate-grid(4,12);
    }
  }
}

Susy でそれをどのように「修正」するかを決定するのは実際には少し難しいですが、あなたがそれを持ち出すのは正しいです - 確かに、よりクリーンな解決策を探す必要があります。GitHub で問題を報告していただけませんか? ありがとう！

于 2013-04-30T22:12:01.097 に答える
1

回避策ブレットをありがとう、それは私isolate-grid()が試す前に使用していたものと似ていますが、私はこのようにしていました(同じことを達成すると信じています):

.box {
  @include span-columns(2);
  @include nth-omega(2n); // every second item completes a row.

  @include at-breakpoint(9) {
    @include span-columns(3,9);
    @include remove-nth-omega(2n);
    @include nth-omega(3n); // every third item completes a row.
  }

  @include at-breakpoint(12) {
    @include span-columns(4,12);
    @include remove-nth-omega(2n);
    @include nth-omega(3n); // every third item completes a row.
  }
}

どちらの方法がより効率的/好ましいか、または両方が同一の CSS にコンパイルされるかどうかを知りたいですか?

于 2013-05-01T11:24:34.790 に答える
0

これは間違いなく、isolate-grid() のバグです。最初の isolate-grid() 呼び出しが clear: left; を適用するという問題に切り分けました。行の最後の項目まで。

ただし、 clear: none; を追加しようとしています。次のブレークポイントで、次の isolate-grid() 呼び出しの前にまったく何もしませんでした。

このバグが修正されるまで、nth-child 宣言に戻らなければなりませんでした。回避策が必要な場合は、nth-child セレクターを使用してこれを行う方法を次に示します。

.box {
  @include span-columns(2);

  @include at-breakpoint(9) {
    @include span-columns(3,9);

    &:nth-child(3n) {
      @include span-columns(3 omega,9);
    }
  }

  @include at-breakpoint(12) {
    @include span-columns(4,12);

    &:nth-child(3n) {
      @include span-columns(4 omega,12);
    }
  }
}
于 2013-04-30T20:37:01.980 に答える