Масонри: современное и качественное решение для строительства домов и построек

Masonry - это библиотека JavaScript, которая позволяет создавать блочную композицию веб-страницы с использованием адаптивной сетки, где каждый блок может иметь разный размер. Таким образом, masonry помогает автоматически расположить элементы на странице, стараясь не оставлять пустые промежутки между ними.

Например, можно использовать masonry для создания галереи изображений на сайте. Без masonry изображения могут располагаться друг под другом, что создает большие неэстетичные пустоты между ними. С помощью masonry изображения будут автоматически расположены в несколько колонок, в зависимости от их размеров и доступної ширины страницы.

Рассмотрим пример:

HTML-код:

  
блок 1
  
блок 2
  
блок 3
  
блок 4
  
блок 5
  
блок 6

CSS-код:

.grid {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px;
}
.grid-item {
  width: calc(33.33% - 20px);
  margin: 0 10px;
  background-color: #ccc;
  padding: 10px;
}

JavaScript-код (с использованием masonry):

var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-item',
  gutter: 20
});

В данном примере мы создаем грид-разметку, которая содержит шесть блоков с классом "grid-item". В CSS мы устанавливаем ширину блоков в 1/3 ширины контейнера и добавляем некое расстояние между ними. Затем мы вызываем библиотеку Masonry и передаем ей контейнер ".grid", а также параметры, среди которых itemSelector указывает на класс, используемый для блоков, а columnWidth указывает на класс, используемый для вычисления ширины колонок в сетке.

В итоге masonry поможет рассчитать и автоматически распределить блоки в сетке, главное следить чтоб прописанные стили наших блоков корректно работали в сваботочном режиме.