[CSS][Java][HTML] Galeria dopasowująca się do rozmiaru ekranu Opcje

[Kosmaty]

Witam jestem nowym użytkownikiem tego forum i być może ten temat już gdzieś został poruszony i wyjaśniony jednak nie udało mi się go znaleźć.

Mianowicie chodzi mi o to by moja galeria wyglądała dokładnie jak ta tu: http://karltaylorportfolio.com/. osobiście udało mi się stworzyć podobną, z tym że umieściłem po kilka zdjęć w wąskich prostokątnych div-ach by zdjęcia układały się jeden pod drugim (z układaniem zdjęć pod sobą też mam problem) lecz gdy obserwuje moją galerię na 2 różnej wielkości ekranach na jednym wygląda ok, a na drugim ma spory biały pasek z prawej strony. Chciałbym by galeria dopasowywała swój rozmiar(wielkość zdjęć) i ilość zdjęć do szerokości ekranu. Część informacji znalazłem tu:http://masonry.desandro.com jednak nadal nie bardzo ogarniam jak to zrobić

[HTML] pobierz, plaintext 
<div id="allgallery">
<div class="gallery">
<div class="part1">
     <a target="_blank" href="img/2.jpg"><img src="img/2.jpg" alt="" /></a>
    <a target="_blank" href="img/1.jpg"><img src="img/1.jpg" alt="" /></a>
    <a target="_blank" href="img/3.jpg"><img src="img/3.jpg" alt="" /></a>
    <a target="_blank" href="img/4.jpg"><img src="img/4.jpg" alt="" /></a>
</div><!-- Close the part1 div -->
</div><!-- Close the gallery div -->
<div class="gallery2">   
<div class="part2"> 
    <a target="_blank" href="img/5.jpg"><img src="img/5.jpg" alt="" /></a> 
    <a target="_blank" href="img/6.jpg"><img src="img/6.jpg" alt="" /></a>
    <a target="_blank" href="img/7.JPG"><img src="img/7.JPG" alt="" /></a>
    <a target="_blank" href="img/8.jpg"><img src="img/8.jpg" alt="" /></a>
    <a target="_blank" href="img/11.jpg"><img src="img/11.jpg" alt="" /></a> 
 
</div><!-- Close the part2 div -->
</div> <!-- Close the gallery2 div -->
<div class="gallery3">
<div class="part3">
     <a target="_blank" href="img/12.jpg"><img src="img/12.jpg" alt="" /></a>
    <a target="_blank" href="img/13.jpg"><img src="img/13.jpg" alt="" /></a>
    <a target="_blank" href="img/16.jpg"><img src="img/16.jpg" alt="" /></a>
    <a target="_blank" href="img/15.jpg"><img src="img/15.jpg" alt="" /></a>
 
</div><!-- Close the part3 div -->
</div><!-- Close the gallery3 div -->
</div><!-- Close the allgallery div -->
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#allgallery { width: 896px; height: 928px; margin: 40px 40px 0px 60px; float: left;}
.part1 { width: 292px; float: left; margin-left: 0px;}
.part1 img { width: 100%; margin-bottom: 6px;}
.part1 img:hover { opacity : 0.80; filter : alpha(opacity=80); cursor: pointer;}
 
.part2 { width: 292px; float: left; margin-left: 10px;}
.part2 img { width: 100%; margin-bottom: 6px;}
.part2 img:hover { opacity : 0.80; filter : alpha(opacity=80); cursor: pointer;}
 
.part3 { width: 292px; float: left; margin-left: 10px;}
.part3 img { width: 100%; margin-bottom: 6px;}
.part3 img:hover { opacity : 0.80; filter : alpha(opacity=80); cursor: pointer;}
 
[HTML] pobierz, plaintext 

Dzięki za pomoc