Как выполнить что-то вроде компоновки Google Keep

В Google Keep у них есть пара столбцов (в зависимости от ширины окна просмотра) заметок одинаковой ширины, которые они организуют, чтобы они выглядели неравномерно.

Как можно сделать что-то подобное? Я предполагаю, что у них есть определенные точки останова при определенной ширине, и после учета отступов и полей они делают изображение совпадающим с желаемой шириной и просто позволяют росту изображения поддерживать одинаковое соотношение сторон.

Это просто моя догадка; как это будет сделано?

Ответ 1

Это не очень хороший пример, но одна вещь, которую вы можете сделать, это использовать flex-box в столбцах.

.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>

Ответ 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>

Ответ 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/[email protected]/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 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