Susy Grid bloğu düzgün bir şekilde akmıyor

Question

Çok basit bir blog düzeni oluşturmak için susy kullanıyorum, geniş orta ekranlar için 3 sütun genişliğinde, küçük (tablet) için 2 sütun ve daha sonra da mobil cihazlar için 1 sütun. Mobil ve tablet düzeni ince ama orta çalışır ve gördüğünüz gibi büyük ekranlar, düzgün birinci sıra ile üçüncü sıra düzgün yüzen değildir ilk sütunu akan değildir Aşağıda

here benim SCSS geçerli:

.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; 
    } 
    } 

} 

benim SCSS stil üstündeki

ve benim susy haritasıdır: Bu, kesme noktaları tanımlanır bağlıdır

@import "susy"; 

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

Answer 1

. Yalnızca min-width kullanılarak tanımlanmışlarsa, sm medya sorgunuzda açıklanan her şey de lg ortamınıza uygulanır. :nth-child beyanlarınızın, bunun gibi medya sorguları arasında sızmasını istemezsiniz. Birkaç seçeneğin var.

• En büyük ancak hepsine max-width değeri ekleyerek kesme noktalarınızın kapsamını daraltmanızı öneririz. Bu şekilde, belirli bir ekran aralığı için düzenleri, kanama konusunda endişelenmeden tanımlayabilirsiniz.
• Diğer seçenek, her yeni kesme noktasında önceki nth-child ayarlarınızı geçersiz kılmaktır. Bunu korumak zor olabilir, bu yüzden ilk seçeneği tercih ederim.

benim kesme noktaları min-genişliğini kullanarak