Отзывчивая сетка с кирпичной кладкой

Я хочу построить отзывчивую сетку каменной кладки, например ЭТО

У меня есть этот HTML

<div class="js-masonry" data-masonry-options='{ "gutter": 20 }'>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

и ГКСС

article{
width: 100%;
float: left;

    @include breakpoint(medium) {
        width: 50%;
    }

    @include breakpoint(large) {
        width: 33.33333%;
    }
}

Когда я удаляю желоб, указанный в html, сетка работает так, как я хочу, но с ней отображается 2 на большой точке останова и 1 на средней. Как я могу заставить это работать с использованием полей для горизонтального размещения статьи?


responsive-design sass grid masonry margins
person user1910388    schedule 11.10.2014    source источник
comment
Чтобы заставить мой работать, мне пришлось использовать box-sizing:border-box в сочетании с размерами не более 1 десятичной точки, И даже тогда 50% не будут работать все время, пока я не сделаю это 49,9%, и есть опция называется .gutter-size. Было очень тяжело заставить его работать с плавным и отзывчивым макетом. Я, должно быть, прочитал документацию 10 раз и попробовал все CodePens Дезандро.   -  person Christina    schedule 14.10.2014
comment
Кроме того, необходимо было включить загружаемый плагин изображений И загрузчик шрифтов Google (все это объясняется в обширной документации), поскольку без них шрифты и изображения при загрузке сделали бы макет неправильным, пока они не будут загружены со скриптом.   -  person Christina    schedule 14.10.2014
comment
@Christina Спасибо за ваши комментарии, я нашел ответ ниже правильным. Я надеюсь, что это помогает :)   -  person user1910388    schedule 15.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что masonry.js добавляет отступ к элементу, делая элемент шириной 50% + 20 пикселей, что слишком велико для размещения в одной строке.

Решение состоит в том, чтобы элементы и желоб помещались в вашу обертку, сделав желоб + элементы в строке = обертке. Если у вас гибкий макет, это будет проблемой, так как masonry.js принимает только фиксированные пиксели в качестве размера желоба.

Поэтому, если (как в вашем примере) вы сделаете элементы фиксированной ширины, это не будет проблемой. Но у masonry.js есть решение; если вы установите желоб не на фиксированную ширину, а на элемент, masonry.js будет использовать ширину этого элемента. Таким образом, гибкое решение может заключаться в следующем:

<div class="js-masonry" 
  data-masonry-options='{ "gutter": ".gutter-sizer", "itemSelector": "article"}'>

  <div class="gutter-sizer"></div>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

и СКСС

article {
  width: 100%;
  float: left;
  @include breakpoint(medium) {
    width: 49.2%;
  }
  @include breakpoint(large) {
    width: 32.26%;
  }
}
.gutter-sizer {
  width: 0%;
  @include breakpoint(medium and large) {
    width: 1.6%; //About 20px on a regular monitor at full width.
  }
}
person Anders Flink    schedule 13.10.2014