Список изображений в 3 размерах

Question

У меня есть список изображений. Они бывают трех размеров: большие, средние и маленькие. Large в 3 раза больше, чем Small (+ немного для расстояния), Medium в 2 раза больше Small (+ немного для расстояния). В этом примере Large - 160x160 пикселей, Medium - 105x105 пикселей, Small - 50x50 пикселей.

Я хочу, чтобы сначала показывались все Большие, затем все Средние, а затем все Малые. Но я хочу, чтобы список заполнил весь экран, то есть нигде не должно быть пустых мест (кроме последнего изображения).

Итак, я хочу это:

Но если я просто попробую просто с этим кодом ( код также в jsfiddle ):

<img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">

Тогда я просто получаю такой результат:

Ооо, как мне написать html / css, чтобы получить желаемый результат?

Примечание. Я ищу решение, не зависящее от ширины экрана.

Answer 1

Этого можно добиться, используя float:left и помещая изображения в контейнер, чтобы они правильно складывались:

.container {
  width: 605px;
}

.container:after {
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
  clear: left;
}

img {
  float: left;
  margin: 0 5px 5px 0;
  display: block;
}

<div class="container">
  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
</div>

Answer 2

сетка дисплея может решить эту проблему красивым способом:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 55px);
    grid-auto-rows: 55px;
    grid-auto-flow: row dense;
}

.big {
    grid-column: span 3;
    grid-row: span 3;
}

.mid {
    grid-column: span 2;
    grid-row: span 2;
}

<div class="container">
<img class="big" src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img class="big" src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
<img class="mid" src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img class="mid" src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
<img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
</div>

Answer 3

На этот вопрос очень легко ответить floats. Перемещая все оставшиеся изображения, вы получите желаемый вид.

Проверьте это JSFiddle .

код

img {
  float: left;
  margin: 0px 5px 5px 0;
}

<html>
<body>

  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/ywppzsf93/list-item-large.png" height="160" width="160">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/lsk5n3fhj/list-item-medium.png" height="105" width="105">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">
  <img src="https://s7.postimg.cc/bv94u105z/list-item-small.png" height="50" width="50">

</body>
</html>

Результат