# 053: Responsiva kolumner för galleriet - CSS-tricks

Innehållsförteckning

Vi lägger till lite lyhördhet för det rutnät vi har ställt in för galleriet. På de bredaste skärmarna har vi den inställd på fyra kolumner. Sedan börjar vi lägga till brytpunkter via våra superlätta @mixins vi har ställt in och har återanvänt överallt.

Vid vår mammabjörns brytpunkt går vi ner till 3 kolumner, sedan gör vi en mellanliggande brytpunkt mellan mammabjörn och babybjörn där den bryts upp i två kolumner, och slutligen 1 kolumn vid babybjörn. Det här är super enkelt, eftersom allt vi behöver göra är att justera hur många kolumner vi ställer in via CSS3 column-count.

Vi avslutar videon och pratar om framtida mål för galleriet. Det vore trevligt att kunna ladda olika antal bilder på olika skärmstorlekar och använda faktiska miniatyrer istället för bilder i full storlek. Kanske en dag kommer vi dit.

För ordens skull är programvaran jag använder lokalt för att fånga skärmdumpar och ladda upp dem till servern via FTP LittleSnapper.

Intressanta artiklar...