創建具有動態內容的不對稱雙列網格的最佳方式是什麼？

Question

我有動態內容流入兩列網格。 Flex盒子是一個不錯的解決方案，但它強制行高度相同，當有更多內容時會產生一些尷尬的空白空間。有沒有人知道一個輕量級的解決方案，可以實現在下面的圖像中希望清楚傳達的內容？

代碼爲我目前的解決方案：

.grid-container { 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    justify-content:space-between; 
 
    height:auto; 
 
    height:700px; 
 
    overflow-y:scroll; 
 
} 
 
.contained-cell{ 
 
    width:48.5%; 
 
    padding:40px 20px;

Answer 1

在代碼中，柔性項目連續默認（flex-direction: row）對齊。並且默認情況下，彈性項目將伸展以佔據容器的全部可用高度（align-items: stretch）–，從而創建相同高度的列。

您可以使用align-items: flex-start使每個彈性項目拉伸到足以包含其內容。但是，正如你所指出的那樣，這不會改變行的高度，結果是物品之間會有很多垂直的空白區域。

這個佈局的標準解決方案是jQuery Masonry，他們在他們的網站上寫道，的工作原理是根據可用的垂直空間將元素放置在最佳位置，有點像鑲嵌在牆上的石匠。這是一種選擇。

保持CSS，但是，另一個flexbox解決方案正在將flex-direction從row更改爲column。通過這種設置，等高行不適用，垂直空白不是問題，每個彈性項目可以是它自己的高度。

這裏有一個演示：http://jsfiddle.net/8rq0maL4/1/