2

この要点を見てください： http://sassmeister.com/gist/6d575ec85663865fa567

そこでは、placehold.it によって実現されたサムネイル グリッドが表示されますfloat-span 。今必要なものは次のとおりです。

  • 各行の最初の .item の padding-left は 0 にする必要があります

  • 各行の最後の .item の padding-right は 0 にする必要があります

これは、残りのコンテンツ (例: lorem ipsum テキスト) と完全に一致するサムネイル グリッドに配置されます。

特異点でこれを達成するための獣の方法は何ですか?

更新日 2014 年 7 月 21 日

私が必要とするものは、この画面で見ることができます:

デモ

別のパディング スタイルは必要ありません。各行の最初と最後のアイテムのパディングを削除する必要があります。sass の計算が間違っているため、これは css を介して行うことはできません。

更新日 2014-07-30

さまざまなソースに基づいて、私はこのミックスインを確立することができました:

@mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){

  @include layout($layout, $gutter: $thegutter) {

  @for $i from 1 through $cols {
    @if $i == 1 {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, left);
      }
    }
    @else if $i < $cols {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, none);
      }
    }
    @else {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, right);
      }
    }
   }
  }
}

これは、たとえば次の方法で呼び出すことができます。

$layout: 1 1 1;
@include thegrid($layout, 3, $el: ".item");

ここで例を見ることができます: http://sassmeister.com/gist/7a45960747ad3d4bbf56

4

1 に答える 1

2

よく分からない。

ガターを絶対値で適用しています。これは、特異点が固定ガターと呼ぶものです。

Singularity は、グリッド要素にパディングを適用することで固定ガターを​​実現します。

パディングは、次の 2 つのスタイルで適用できます。

  • split: ガター サイズが 2 で除算され、結果の値がすべてのグリッド アイテムの左右のパディングとして適用されます。
  • opposite: ガター サイズの値は、最後の列を占めるアイテムを除くすべてのアイテムに右パディングとして適用されます。

したがって、分割ガターに不満がある場合は、反対側のガターに切り替えてください。これがデフォルトの動作なので、単にコメントアウトできます@include add-gutter-style('split');。

どちらのガター スタイルにも満足できない場合は、不要なパディングを手動で削除できます。最初と最後の列を占める以外の項目にゼロパディングを適用すると、グリッドが歪むため、これはあまり意味がありません。また、最初と最後の列を占めるアイテムにのみ適用すると、基本的にoppositeガター スタイルと同じ設定になります。

希望のレイアウトの鉛筆画を作成すると、より良いヘルプが得られる場合があります。

更新日 2014 年 7 月 21 日

OK、これであなたの言いたいことは明らかです。

したがって、基本的に、外側のレベルには分割ガターが必要であり、内側のレベルには反対側のガターが必要です。グリッド設定をオーバーライドするために必要な mixinを既に使用しているlayout()ため、ガター スタイルをオーバーライドするように指示することができます。

@mixin layout(2, $gutter-style: 'opposite') {

残念ながら、Singularity はパディングによって固定ガターを​​作成するため、分割モードでのみうまく機能します。反対のモードでは、ガターを固定すると不均一な柱が生成されます。

したがって、相対ガターを使用する必要があります。

@mixin layout(2, 0.1, $gutter-style: 'opposite') {

次の点に注意してください。

  1. 各行の最後のアイテムを個別にスパンします。

    反対のガター スタイルでは、各行の最後の項目は特別です。つまり、右のガターが含まれていません。そのため、Singularity にどのアイテムが行の最後のアイテムであるかを伝える必要があります。

    これを行うには、:nth-child(Xn + Y)セレクターを使用します。ここXで、 は行内のアイテムYの数であり、 は行内のターゲット アイテムの数です。最後のアイテムをターゲットにしているため、次のようXにYなります。

    @include float-span(1);

&:nth-child(4n + 4) {
  @include float-span(1, last);
}

  2. メディア クエリの分離。

    ブレークポイントごとにこれを行うと、さまざまなブレークポイントのさまざまなアイテムにスタイルが適用されます。これらのスタイルはオーバーライドされないため、小さなブレークポイントから大きなブレークポイントにリークし、レイアウトが崩れます。

    それらを手動で上書きすることもできますが、それはありがたい仕事です。代わりに、メディア クエリを分離して、スタイルが漏れないようにします。

    $beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint:       800px;

// Mobile view (formerly without a media query)
@include breakpoint($beforeMediumBreakpoint) {

デモ: http://sassmeister.com/gist/dd9f1af025900d7e63db

PS私からのアドバイス: 固定ガターと分割モードを使用しないでください。流体ガターとデフォルトの反対モードを使用します。これにより、多くのトラブルからあなたを救うことができます！最も外側のコンテナーにパディングを適用することで、いつでも分割ガターをシミュレートできます。

グリッド アイテム間のガターと等しくなるコンテナーの相対的なパディングを計算するために、いくつかの計算を行うことができます。数学の魔法を使えば、グリッド アイテムにグリッド ガターと同じ下余白を適用して、美しい均一なサムネイル グリッドを作成することもできます。

サムネイル グリッドを設定するために必要な作業量を削減できる気の利いた拡張機能Singularity Quick Spannerを作成しました。動作を確認してください(垂直方向のガターは水平方向のガターと同じであることに注意してください)。

于 2014-07-19T12:25:41.900 に答える