0
Я работаю над коллажем изображений для своего сайта и просто пытаюсь сделать это с использованием кладки, но когда я изменяю размер созданных блоков, по какой-то причине они разлетаются с большими разрывами между каждым блоком. Есть какие нибудь идеи как это починить?Каменная кладка HTML/CSS создала блоки с плавающей точкой
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- grid ---- */
.grid {
border: 5px solid black;
overflow: hidden;
background: #EEE;
max-width: 1346px;
max-height: 400px;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 240px;
height: 180px;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Masonry - Initialize in HTML</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Masonry - Initialize in HTML</h1>
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://masonry.desandro.com/masonry.pkgd.js'></script>
<script src="js/index.js"></script>
</body>
</html>Как это не может показать там вам нужно будет создать файл для него, чтобы увидеть, что происходит. 
Спасибо!
Хорошо я попробую это. –