Блок Susy Grid не течет должным образом

Я использую susy для создания очень простого макета блога, его 3 колонки шириной для больших средних экранов, 2 колонки для маленьких (планшетов) и затем 1 колонка для мобильных устройств. Макет для мобильных устройств и планшетов работает нормально, но средние и большие экраны не отображаются должным образом, первый столбец в первой строке и третья строка не перемещаются должным образом, как вы можете видеть здесь

Ниже мой 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;
    }
  }

}

и моя карта susy в верхней части моей таблицы стилей scss:

@import "susy";

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

susy-compass susy-sass susy
person Duggy G    schedule 04.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это зависит от того, как вы определили точки останова. Если они определены с использованием только min-width, то все, что описано в вашем sm медиа-запросе, также будет применяться к вашему lg медиа. Вы не хотите, чтобы ваши объявления :nth-child просачивались между подобными медиа-запросами. У вас есть несколько вариантов.

  • Я рекомендую сузить область ваших точек останова, добавив значение max-width ко всем, кроме самых больших. Таким образом, вы можете определить макеты для определенного диапазона экранов, не беспокоясь о кровотечении.
  • Другой вариант — переопределить ваши предыдущие настройки nth-child в каждой новой точке останова. Это может быть сложно поддерживать, поэтому я предпочитаю первый вариант.
person Miriam Suzanne    schedule 05.04.2016
comment
Да, я использую минимальную ширину для своих точек останова, вот что я использую: if $class == xs { media (max-width: 767px) { @content; } } else if $class == sm { media (min-width: 768px) { @content; } } else if $class == md { media (min-width: 992px) { @content; } } else if $class == lg { media (min-width: 1200px) { @content; } } Если я изменю min-width на max-width, планшет будет выглядеть неправильно, вы можете увидеть базовую сетку, которая у меня есть ссылка - person Duggy G; 05.04.2016
comment
Вы не хотите менять min-width на max-width, вы хотите использовать оба для всего посередине. Так, например, if $class == md { media (min-width: 992px) and (max-width: 1199px) { @content; } }. Это дает нижний и верхний предел вашим стилям, поэтому они не перетекают в следующую точку останова. - person Miriam Suzanne; 05.04.2016
comment
Спасибо, добавление минимальной и максимальной ширины решило мою проблему. - person Duggy G; 06.04.2016