Сетка в вашем примере рушится из-за display: inline-block;
у слайдов.
Дело в том, что строчно-блочные (inline-block) элементы, при расположении их в ряд - пытаются вести себя как строчные (inline) - выстраиваться в соответствии с интерлиньяжем (line-height), размерами шрифта (font-size). И также, что важно в вашем случае - между ними может присутствовать небольшой зазор, равный ширине пробела при установленном размере шрифта. Он то и рушит сетку - зазоры между тайлами оказываются больше, чем вы задаете с помощью margin
.
Проблему решает установка display: block;
и float: left;
для этих блоков:
.tile {
max-width: 300px;
max-height: 200px;
position: relative;
display: block;
margin: 10px;
float: left;
}
margin
можно вернуть к значению 10px
, и для мелких, и для большого тайла. Сетка не поедет.
