[英]Susy Grid block not flowing properly
I'm using susy to create a very basic blog layout, its 3 columns wide for large medium screens, 2 columns for small (tablet) and then 1 column for mobile. 我正在使用susy创建一个非常基本的博客布局,其3列宽用于大中型屏幕,2列宽用于小屏幕(平板),然后1列用于移动。 The mobile and tablet layout works fine but medium and large screens are not flowing properly, the first column in the first row and third row are not floating properly as you can see here
您可以在此处看到手机和平板电脑的布局正常,但中型和大型屏幕无法正常显示,第一行和第三行的第一列未正确浮动
Below is my scss: 以下是我的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;
}
}
}
and my susy map at the top of my scss stylesheet is: 我的scss样式表顶部的可疑地图是:
@import "susy";
$susy: (
columns: 12,
container: 1200px,
gutters: 1/4,
grid-padding: 1em,
global-box-sizing: border-box,
debug: (image: show)
);
This depends on how you defined your breakpoints. 这取决于您如何定义断点。 If they are defined using
min-width
only, then everything described in your sm
media-query, will also apply to your lg
media. 如果仅使用
min-width
定义它们,则sm
media-query中描述的所有内容也将应用于lg
介质。 You don't want your :nth-child
declarations to bleed between media-queries like that. 您不希望这样的媒体查询在您的
:nth-child
声明之间流血。 You have a few options. 您有几种选择。
max-width
value to all but the largest. max-width
值添加到除max-width
所有值来缩小断点的范围。 That way you can define layouts for a specific range of screens without worrying about bleed. nth-child
settings at each new breakpoint. nth-child
设置。 That can be difficult to maintain, which is why I prefer the first option.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.