Kodların Çok karmaşık gözüktüğü için okumadım. Lütfen "Markdown"lar ile ilgili makaleyi oku. markdown
Css'in Flex özelliği ile yapabilirsin.
Çalışan örneğinin linki için tıkla

flex-wrap kodu zorunlu değil ama ekran genişliği, resimler ekrana sığmayacak kadar küçük olduğu zaman resimleri alt satıra taşır.

CSS Kodları:

.resimler{
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  
}

img{
  width: 100px;
  height: 100px;
}

HTML Kodları:

<div class="resimler">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
</div>