Budujemy prostą galerię obrazów masonry na stronę internetową [CSS]

Dzisiaj zbudujemy bardzo prostą galerię obrazów w stylu masonry (pionowe) z pomocą CSS. No dobrze, ale z pewnością część z was zastanawia się co to jest te masonry. W języku angielskim słowo to oznacza kamieniarstwo, murarstwo.

Jak wygląda taka galeria grafik na stronie internetowej?!

Jak nie trudno się teraz domyśleć z układem masonry mamy do czynienia, w przypadku nierównomiernie rozmieszczonych elementów ułożonych tak, by przerwy między nimi były równomierne. Termin ten został spopularyzowany przez Davida DeSandro, autora bardzo popularnej biblioteki JavaScript Masonry istniejącej od 2010 roku.

My jednak uzyskamy ten efekt na stronie z pomocą CSS.

Demo Do Pobrania

Budujemy prosty layout masonry dla galerii

Na początek przyda nam się drobna powtórka z tematu, który pojawił się na blogu już kilka lat temu. Zawiera on cenne wskazówki o tym jak podzielić zawartość kontenera na równej szerokości kolumny. Znajduje się tam praktycznie wszystko co jest potrzebne do zbudowania nierównomiernego rozmieszczenia obrazów.

Kolejnym potrzebnym elementem będą oczywiście zdjęcia i obrazy, które chcemy umieścić w naszej galerii. Nie muszą one być w tym samym rozmiarze. A nawet wypadało by żeby się różniły (w tedy efekt będzie lepiej widoczny). Tak jak na obrazku powyżej.

Jeżeli mamy te wszystkie elementy przystępujemy do kodowania. Poniżej zamieściłam fregat kodu HTML naszej galerii.

<div class="gallery gallery-columns-3">   // kontener galerii
  <div class="gallery-item">   // element
    <img src="https://cdn.pixabay.com/photo/2016/03/09/16/50/city-street-1246870__340.jpg">
  </div>
  <div class="gallery-item">  // element
    <img src="https://cdn.pixabay.com/photo/2016/03/09/15/17/balloons-1246567_960_720.jpg">
  </div>
</div>

Jak widać w kontenerze znajdują się 2 elementy z klasą gallery-item. Oczywiście nie wystarczą one do utworzenia dużej i ciekawej galerii, ale dobrze pokazują w jaki sposób dodawać kolejne elementy.

Teraz najtrudniejsze musimy z pomocą CSS nadać układ naszej galerii. W tym momencie informacje zawarte we wcześniejszym wpisie bardzo się wam przydadzą – nie będę bowiem tłumaczyć po raz kolejny jak działają Multiple Columns.

Podział na kolumny z obrazkami

Zaczniemy od określania właściwości kontenera. Jak widać posiada on 2 klasy. Zrobiłam tak dlatego, że część cech konteneru nie będzie ulegać zmianie podczas gdy inne cechy tak.

.gallery {
  column-rule: 0px solid #eee;
  column-gap: 17px;
  width: 100%;
  max-width: 1000px; 
  margin: 0 auto;
}
.gallery.gallery-columns-3 {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */  -moz-column-count: 3;
  /* Firefox */  column-count: 3;
}

Zmiana cech kontenera będzie oczywiście związana z rozmiarami urządzenia na jakim będziemy oglądać stronę z galerią. Nasza galeria będzie bowiem w technologi RWD. Wraz ze zmieszaniem szerokości ekranu będziemy odejmować 1 kolumnę.

@media only screen and (max-width: 1023px) {
  .gallery.gallery-columns-3 {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */    -moz-column-count: 2;
    /* Firefox */    column-count: 2;
  }
}

@media only screen and (max-width: 720px) {
  .gallery.gallery-columns-3 {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */    -moz-column-count: 1;
    /* Firefox */    column-count: 1;
  }
}

Dobrze teraz pora na zawartość.

.gallery .gallery-item {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 17px;
  max-width: 100%;
  width: 100%;
}
.gallery .gallery-item img{
  max-width: 100%;
  height:auto;
  display:block;
  margin: 0 auto;
  width: 100%;
}

Gotowy efekt jak to będzie wyglądało na stronie internetowej możecie podziwiać poniżej:

Demo – masonry z pomocą CSS 

źródła:

• https://codeburst.io/how-to-pure-css-masonry-layouts-a8ede07ba31a
• https://w3bits.com/css-masonry/
• https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/