Dodajemy trochę responsywności do siatki, którą ustawiliśmy dla Galerii. Na najszerszych ekranach ustawiliśmy go na czterech kolumnach. Następnie zaczynamy dodawać punkty przerwania za pośrednictwem naszych super łatwych @mixins, które skonfigurowaliśmy i których używaliśmy ponownie.
W naszym punkcie przerwania mama-niedźwiedź schodzimy do 3 kolumn, a następnie tworzymy tymczasowy punkt przerwania między mamuśką a niedźwiadkiem, gdzie dzieli się na 2 kolumny, a następnie ostatecznie 1 kolumnę na niedźwiadku. Jest to bardzo proste, ponieważ wszystko, co musimy zrobić, to dostosować liczbę kolumn, które ustawiliśmy za pomocą CSS3 column-count.
Kończymy film opowiadając o przyszłych celach galerii. Byłoby miło móc załadować różną liczbę obrazów na ekranach o różnych rozmiarach i używać rzeczywistych miniatur zamiast pełnowymiarowych obrazów. Może kiedyś tam dotrzemy.
Dla przypomnienia, oprogramowanie, którego używam lokalnie do przechwytywania zrzutów ekranu i przesyłania ich na serwer przez FTP, to LittleSnapper.
