<div class="galeri">
  <div><img src="https://fatihhayrioglu.com/images/koy_01.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_02.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_03.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_04.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_05.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_06.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_07.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_08.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_09.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_10.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_01.jpg" alt=""></div>
  <div><img src="https://fatihhayrioglu.com/images/koy_02.jpg" alt=""></div>
</div>
.galeri {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: repeat(3, 150px);
  gap: 20px 10px;
}

.galeri img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}


body {
  margin: 40px auto;
  padding: 0;
  width: 830px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.