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

Question

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

Greg-- · Answer

Один из простых вариантов через 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); }

Но есть проблемы с адаптивностью Обратите внимание на свойство background-repeat: space; из-за него и проблемы с адаптивностью. Размеры width: 300%; height: 300vh; top: -200%; left: -50%; Указал методом проб и ошибок Другие варианты - построить через флекс или грид.

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

One Answer

Add your own answers!

Ask a Question