Изображения в моей галерее CSS становятся ниже, чем ожидалось, при вводе ряда изображений под первым. ⇐ CSS

[Anonymous]

Я нашел код галереи CSS и захотел попробовать запустить его самостоятельно, чтобы проверить, работает ли он на самом деле. Код — Moodboard with Masonry от Shinya1992 на CodePen. Я скопировал и вставил весь код, запустил его и ожидал, что результат увижу в предварительном просмотре ранее связанного кода (хорошо расположенная галерея). Это было не то, что появилось.
Я получил галерею изображений, но между первым изображением и изображением в строке под ним непропорционально много места, а между ними нет места. изображения.
Я попытался скопировать и вставить весь код, включенный в исходный код, насколько это было возможно, чтобы увидеть, не является ли это просто проблемой того, как я записал код. , но после тестирования я не думаю, что это так. Тем не менее, вот код, который я скопировал и вставил (используя в качестве примера только 8 изображений):

Код: Выделить всё

var $grid = $('.grid').imagesLoaded().progress( function() {
$grid.masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
});
});

Код: Выделить всё

*{ box-sizing: border-box;}
a {
text-decoration: none;
}
body {
/*   background: #cc6633; */
font: 12px 'Montserrat', 'Helvetica', sans-serif;
}
.title {
color: #7d3917;
font-size: 46px;
margin: 10px 0 30px 0;
text-align: center;
}
.grid {
margin: 0 auto;
width: 90%;
}

.grid:after {
content: '';
display: block;
clear: both;
}
.grid-sizer,
.grid-item {
width: 24%;
}
.gutter-sizer {
width: 1.3333%;
}

.grid-item {
float: left;
margin-bottom: 1.3333%;
position: relative;
}

.grid-item img {
display: block;
width: 100%;
}

.itm-from {
background: #cc6633;
background: rgba(204, 102, 51, 0.7);
color: #fdfdfd;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 14px;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-moz-transition: 0.2s opacity ease-in-out;
-o-transition: 0.2s opacity ease-in-out;
-webkit-transition: 0.2s opacity ease-in-out;
transition: 0.2s opacity ease-in-out;
width: 100%;
}
.grid-item:hover .itm-from {
opacity: 1;
}
.itm-from a {
color: #7d3917;
display: block;
}
@media all and (max-width: 900px) {
.grid-sizer,
.grid-item {
width: 32%;
}
.gutter-sizer {
width: 2%;
}
.grid-item {
margin-bottom: 2%;
}
#pdesc { line-height: 1.5; }
}
@media all and ( max-width: 700px) {
.grid-sizer,
.grid-item {
width: 48%;
}
.gutter-sizer {
width: 4%;
}
.grid-item {
margin-bottom: 4%;
}
}
@media all and ( max-width: 400px ) {
.grid-sizer,
.grid-item {
width: calc(100%);
}
}

Код: Выделить всё

Moodboard with Masonry





[img]https://farm1.staticflickr.com/149/428144742_f509cd9927.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm1.staticflickr.com/204/489660321_a6833ba9cf.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm1.staticflickr.com/244/459042039_98a488bf79.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm1.staticflickr.com/27/92937010_2d03825900.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm1.staticflickr.com/637/31711772564_f0a9627692.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm1.staticflickr.com/73/154716528_717697a157.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm1.staticflickr.com/77/199628917_e19e3ff68d.jpg[/img]

from [url=#]blahblah[/url]



[img]https://farm2.staticflickr.com/1029/1144531870_5b1119763b_z.jpg?zz&[/img]

from [url=#]blahblah[/url]

Я видел тот же пример кода в других местах, и никаких проблем не возникло.
Мне интересно, требует ли этот код наличия активного сайта для правильного отображения или что-то в этом роде? Или проблема в размере изображения?

Подробнее здесь: https://stackoverflow.com/questions/785 ... w-of-image