Галерея Susy с элементами переменной ширины

Я использую Susy grid. Мне нужно сделать галерею блоков разной ширины. Это будут блоки шириной 1/3, 2/3 и 3/3. На странице может быть много таких блоков, и они могут располагаться в произвольном порядке. Если блок не помещается в одну строку, он должен перейти на следующую строку.

<div class="gallery"
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item1of3">...</div>
    <div class="item3of3">...</div>
    <div class="item1of3">...</div>
    <div class="item2of3">...</div>
    <div class="item2of3">...</div>
</div>

Следующий код не помогает ...

.item1of3 {
    @include gallery(1 of 3);
}

.item2of3 {
    @include gallery(2 of 3);
}

.item3of3 {
    @include gallery(3 of 3);
}

потому что миксин галереи работает только для идентичных элементов. http://codepen.io/inliner/pen/YXWRRp

Так возможно ли это на самом деле?

Мне нужно что-то вроде этого - http://codepen.io/anon/pen/vOKQbx Но с правильный способ борьбы с наценкой. Блоки должны быть выровнены внутри контейнера.


css sass susy
person Andrey    schedule 19.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Любой макет, который вы можете сделать с помощью CSS, вы можете сделать с помощью Susy. В этом случае, однако, я не знаю ни одного хорошего решения CSS с плавающей запятой, которое дает вам случайный порядок, выровненные края, промежутки между ними и плавную ширину. Вы можете сделать это с помощью flexbox, хотя:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item1of3 {
  flex: 0 0 span(1 of 3);
}

.item2of3 {
  flex: 0 0 span(2 of 3);
}

.item3of3 {
  flex: 0 0 span(3 of 3);
}

Если вам нужно использовать поплавки, самое лучшее, что вы получите, - это inside или split желоба:

.item1of3 {
    @include span(1 of 3);
}

.item2of3 {
    @include span(2 of 3);
}

.item3of3 {
    @include span(3 of 3);
}

Но эффект немного другой. Внутренние желоба дадут вам оправдание, но не пространство между элементами. Разделенные желоба дадут вам пространство между ними, а также немного места по краям. Если все имеет статическую ширину, вы можете сделать что-нибудь с отрицательными полями на .gallery, чтобы удалить краевые желоба.

person Miriam Suzanne    schedule 20.05.2015