如何完成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