Идея сортировки как на Pinterest

Question

Как сделать с помощю Grid-ов или без, так как на странице pinterest, всмысле сортировка картинков там такой(картинка ниже) и возможно ли это без фреймворков

Answer 1

Самый простой вариант с использованием свойства column-count:, которое определяет количество колонок. На примере ниже выстраиваем картинки в три колонки column-count: 3;

.items {
  column-count: 3;
}

.item {
  display: inline-block;
  margin-top: 10px;
}

.item img {
  display: block;
  width: 100%;
}

<div class="items">
  <div class="item"><img src="https://images.pexels.com/photos/1257110/pexels-photo-1257110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1054974/pexels-photo-1054974.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/2253879/pexels-photo-2253879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1257099/pexels-photo-1257099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1128318/pexels-photo-1128318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/532508/pexels-photo-532508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/834508/pexels-photo-834508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>

Answer 2

Вариант с использованием системы компоновки элементов CSS Flexbox. На примере ниже выстраиваем картинки в три колонки.

Такую же сетку можно выстраивать и с помощью CSS Grid. Однако, на мой взгляд, эффективнее всего для этих целей использовать библиотеку Masonry.

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0;
}

.item {
  width: calc(33.3% - 10px);
  margin: 5px;
}

.item img {
  display: block;
  width: 100%;
  opacity: 0.5;
  transition: .5s opacity;
}

.item:hover img {
  opacity: 1;
}

@supports not (flex-wrap: wrap) {
  .item {
    display: block;
  }
  .item img {
    display: inline-block;
    vertical-align: top;
  }
}

<div class="items">
  <div class="item"><img src="https://images.pexels.com/photos/1257110/pexels-photo-1257110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1054974/pexels-photo-1054974.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/2253879/pexels-photo-2253879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1257099/pexels-photo-1257099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/1128318/pexels-photo-1128318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/532508/pexels-photo-532508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/834508/pexels-photo-834508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
  <div class="item"><img src="https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>

БЛОГ НА HUSL

Идея сортировки как на Pinterest

Ответы (2 шт):