Hei og takk for svar.
Akkurat nå bruker jeg column-count og column-gap.
Her setter jeg 1 for telefon, 2 for tablet p og opp og 3 for 1200px og oppover.
Ut ifra forskjellige guider skal dette fungere, men det gjør det ikke for min del i hvert fall.
Fant en guide som gjorde det sånn som det her:
Kode
.gallery-section {
.images {
line-height: 0;
-webkit-column-count: 1;
-webkit-column-gap: 0px;
-moz-column-count: 1;
-moz-column-gap: 0px;
column-count: 1;
column-gap: 0px;
vertical-align: baseline;
@include tablet-p-up {
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
}
@include desktop-up {
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 0px;
-moz-column-count: 3;
-moz-column-gap: 0px;
column-count: 3;
column-gap: 0px;
column-fill: initial;
}
.brick {
display: inline-block;
margin: 0;
width: 100%;
vertical-align: top;
img {
max-width: 100%;
vertical-align: middle;
}
}
}
}
Ut ifra guiden så skulle bildene da se sånn her ut:
https://w3bits.com/labs/css-masonry/3/