# 053: Responsive kolonner til galleriet - CSS-tricks

Indholdsfortegnelse

Vi tilføjer noget lydhørhed til det gitter, vi har oprettet til galleriet. På de bredeste skærme har vi den indstillet til fire kolonner. Derefter begynder vi at tilføje breakpoints via vores super nemme @mixins, vi har oprettet og har genbrugt overalt.

Ved vores mama-bjørn-brydepunkt går vi ned til 3 søjler, så laver vi et midlertidigt brudpunkt imellem mama-bjørn og baby-bjørn, hvor det bryder ind i 2 søjler, derefter i sidste ende 1 søjle ved baby-bjørn. Dette er super nemt, da alt hvad vi skal gøre er at justere, hvor mange kolonner vi indstiller via CSS3 column-count.

Vi afslutter videoen og taler om fremtidige mål for galleriet. Det ville være rart at kunne indlæse forskellige antal billeder på forskellige skærmstørrelser og bruge faktiske miniaturer i stedet for billeder i fuld størrelse. Måske kommer vi en dag derhen.

For ordens skyld er softwaren, jeg bruger lokalt til at fange skærmbilleder og uploade dem til serveren via FTP, LittleSnapper.

Interessante artikler...