Grunnen til at det første eksempelet du postet ikke virket er rett og slett at CSS-koden og HTML-koden ikke hører sammen. CSS-koden er i tillegg skrevet feil. Siden dette er en såpass lett feil å se, så mistenker jeg kanskje også at du ikke vet hva SCSS / SASS er for noe. (Den som skrev CSS-koden du postet ovenfor vet i alle fall ikke hva det er.)
SCSS (samt SASS og LESS) er en måte å introdusere programmering i CSS på. CSS tillater veldig lite logikk, og det kan for eksempel være nyttig å lagre variabler med farger og marginer som kan gjenbrukes mange steder - men kontrolleres fra ett sted. SCSS, SASS og LESS tillater dette, men siden denne typen ting ikke er støttet i CSS ennå, og følgelig ikke støttet i noen nettlesere, så må SCSS-kode kompileres før den kan brukes. Det finnes mange programmer som kan gjøre dette for deg. Som jeg også nevnte, så er det en skrivefeil i selve koden også; man kan ikke bruke @include på den måten de gjør her. @include er for å hente inn en såkalt "mixin", men det krever at en mixin med samme navn er definert. Det er det ikke her. Syntaksen er rett og slett feil.
I CSS så er alt som starter med .punktum et klassenavn som skal eksistere ett eller annet sted i HTML-koden din. Koden definerer klassene gallery-section, images og brick. Kun én av disse klassene eksisterer i HTML-koden din, men så lenge denne klassen ikke er en child av gallery-section, så vil den uansett ikke bli stylet (hvis CSS-koden hadde fungert som den skulle, i alle fall).
Her er koden uten syntaksfeil:
Kode
<!doctype html>
<html>
<head>
<style>
.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;
}
@media (min-width: 768px) {
.gallery-section .images {
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;
}
}
@media (min-width: 992px) {
.gallery-section .images {
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;
}
}
.gallery-section .images .brick {
display: inline-block;
margin: 0;
width: 100%;
vertical-align: top;
}
.gallery-section .images .brick img {
max-width: 100%;
vertical-align: middle;
}
</style>
</head>
<body class="gallery-section">
<div class="images">
<div class="brick">
<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
</div>
<div class="brick">
<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
</div>
<div class="brick">
<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
</div>
<div class="brick">
<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
</div>
<div class="brick">
<img src="https://media.treehugger.com/assets/images/2019/07/angeltree.jpg.1200x0_q70_crop-smart.jpg" alt="">
</div>
</div>
</body>
</html>
Dette er en fungerende grid, men det er ikke i nærheten av den samme effekten som du linker til.