Как сделать сетку изображений как на Pinterest?

Question

Всем привет, подскажет кто как сделать такую сетку,только фотка будет одна и та же повторяться. Может быть у кого-нибудь есть пример?

Answer 1

Один из простых вариантов через backgroung-image с повторением

* {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}
.container:after {
  position: absolute;
  content: '';
  background: url(https://placeimg.com/200/135/nature) 0 0 repeat;
  background-repeat: space;
  width: 300%;
  height: 300vh;
  top: -200%;
  left: -50%;
  z-index: -1;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

<div class="container">
</div>

Но есть проблемы с адаптивностью Обратите внимание на свойство background-repeat: space; из-за него и проблемы с адаптивностью. Размеры

 width: 300%;
  height: 300vh;
  top: -200%;
  left: -50%;

Указал методом проб и ошибок

Другие варианты - построить через флекс или грид.

БЛОГ НА HUSL

Как сделать сетку изображений как на Pinterest?

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