可替換寬度元素的Susy圖庫

我正在使用Susy網格。我需要製作一個有不同寬度的圖塊。它們將是1/3，2/3和3/3寬度塊。頁面中可以有很多這樣的塊，並且它們可以隨機排列。如果一個塊不適合在一條線上，它必須跳到下一行。可替換寬度元素的Susy圖庫

<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 但用正確的方式來處理利潤率。塊必須在容器內對齊。

來源

2015-05-19 Andrey

你可以用CSS做任何佈局，你可以用Susy做。不過，在這種情況下，我不知道有哪些CSS浮動解決方案可以讓你隨機排序，邊緣對齊，間隙和流體寬度。你可以do it with 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上的負邊距進行操作，以去除邊緣排水溝。

來源

2015-05-20 16:42:02

可替換寬度元素的Susy圖庫

回答

相關問題