Susyグリッドブロックが正しく流れていない

Question

私は、非常に基本的なブログレイアウトを作成するためにsusyを使用しています。大きな中画面の場合は3列、小（タブレット）の場合は2列、モバイルの場合は1列です。モバイルおよびタブレットレイアウトを使用すると、以下here

を見ることができるように最初の行の最初の列と第三列が適切に浮いていない、罰金が、中規模および大画面が正常に流れていない作品私のSCSSです：

.col-post { 
    margin-bottom: gutter(); 
    background: #f5f5f5; 

    @include breakpoint(xs) { 
     @include span(12 of 12); 
    } 

    @include breakpoint(sm) { 
     @include span(6 of 12 first); 
     &:nth-child(2n) { 
     @include last; 
    } 
    } 

    @include breakpoint(md) { 
     @include span(4 of 12 first); 
     &:nth-child(3n) { 
     @include last; 
    } 
} 

    @include breakpoint(lg) { 
     @include span(4 of 12 first); 
     &:nth-child(3n) { 
     @include last; 
    } 
    } 

} 

と私SCSSスタイルシートの上部にある私のSUSYマップされています。これは、あなたのブレークポイントを定義した方法によって異なり

@import "susy"; 

    $susy: (
     columns: 12, 
     container: 1200px, 
     gutters: 1/4, 
     grid-padding: 1em, 
     global-box-sizing: border-box, 
     debug: (image: show) 
    ); 

Answer 1

。 min-widthのみを使用して定義されている場合、smメディアクエリに記載されているものはすべてlgメディアにも適用されます。あなたはそのようなメディアクエリの間にあなたの:nth-child宣言を流したくないです。いくつかの選択肢があります。

• max-widthの値を最大以外のすべてに追加することによってブレークポイントの範囲を絞り込むことをお勧めします。こうすることで、ブリードを心配することなく、特定の画面範囲のレイアウトを定義できます。
• もう1つの方法は、新しいブレークポイントごとに以前のnth-child設定を上書きすることです。それは維持するのが難しいかもしれません。それが私が最初の選択肢を好む理由です。私のブレークポイントのための最小幅を使用して