如何完成Google Keep佈局

Question

在Google Keep中，它們有幾列（取決於您的視口寬度）寬度相同的筆記，它們使其看起來不統一。

怎麼能像這樣來完成？我猜他們在特定的寬度上有特定的斷點，並且在考慮填充和邊距之後，他們會使圖像與所需的寬度匹配，並簡單地讓圖像高度保持相同的寬高比。

這只是我的猜測;它將如何完成？

Answer 1

這不是一個好例子，但你可以做的一件事就是在列中使用彈性框。

.note { 
 
    max-width: 100px; 
 
    margin: 5px 10px; 
 
} 
 
div.container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    background-color: lightgray; 
 
} 
 
div.column { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    background-color: lightgray; 
 
}

<div class="container"> 
 
<div class="column"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> 
 
</div> 
 
<div class="column"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> 
 
</div> 
 
<div class="column"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> 
 

 
</div> 
 
</div>

Answer 2

一個更簡單的解決方案可能是使用CSS列屬性，這樣你可以控制你的斷點（也排水溝）列的數量。

此外，它似乎所有在一起一個好主意，如果你可以達到相同的效果沒有一堆明確的容器，那麼你應該。顯然有些事情需要考慮流量，可能會爲您做出決定。希望這有助於增加上面的答案。

.container { 
 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; /* Firefox */ 
 
    column-count: 3; 
 
    -webkit-column-gap: .5rem; /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: .5rem; /* Firefox */ 
 
    column-gap: .5rem; 
 

 
} 
 
.note { 
 
    width: calc(100%/1); 
 
}

<div class="container"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> 
 
    <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> 
 
</div>

Answer 3

如果你只是想小規模的輕質實現，使用Minigrid

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://npmcdn.com/minigrid@3.0.1/dist/minigrid.min.js"></script> 

</head> 
<body> 
    <div class="cards"> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
    </div> 
</body> 
</html> 

CSS

.card { 
    width: 160px; 
} 


/* Anything bellow here isn't necessary, it's only for the demo */ 

.card { 
    background-color: #F25D9C ; 
} 

/* Set some height to cards */ 
.card:nth-child(1) { 
    height: 240px; 
} 

.card:nth-child(2) { 
    height: 190px; 
} 

.card:nth-child(3) { 
    height: 210px; 
} 

.card:nth-child(4) { 
    height: 230px; 
} 

.card:nth-child(5) { 
    height: 180px; 
} 

.card:nth-child(6) { 
    height: 200px; 
} 

body { 
    background-color: #F9F7F7; 
} 

.cards { 
    width: 100%; 
    max-width: 1040px; 
    margin: 0 auto; 
    text-align: center; 
} 

的Javascript：

(function(){ 
    var grid; 
    function init() { 
    grid = new Minigrid({ 
     container: '.cards', 
     item: '.card', 
     gutter: 12 
    }); 
    grid.mount(); 
    } 

    // mount 
    function update() { 
    grid.mount(); 
    } 

    document.addEventListener('DOMContentLoaded', init); 
    window.addEventListener('resize', update); 
})(); 

演示：http://jsbin.com/wamele/edit?html,css,js,output