<div class="gallery">
    <div class="gallery-item">
      <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/portrait-of-a-trainer-in-gym-royalty-free-image-1584723855.jpg?resize=480:*" alt="">  
    </div>
    <div class="gallery-item">
      <img src="https://assets.website-files.com/5bee2dee67d34caed2a30658/5cca248137d849a21f957a2d_TrainersSmiling2.jpg" alt="">  
    </div>
    <div class="gallery-item">
      <img src="https://cms-static.wehaacdn.com/fit--pro-com/images/Screen-Shot-2020-02-14-at-9-44-14-AM.4514.widea.0.png" alt="">
    </div>
    <div class="gallery-item">
      <img src="https://cms-static.wehaacdn.com/fit--pro-com/images/FitnessLeaderPrinciples.3579.widea.0.jpg" alt="">
    </div>
    <div class="gallery-item">
      <img src="https://femina.wwmindia.com/content/2020/jun/fitness-thumb1591172941.jpg" alt="">
    </div>
    <div class="gallery-item">
      <img src="https://media.istockphoto.com/photos/portrait-of-a-beautiful-woman-at-the-gym-picture-id856797530?k=20&m=856797530&s=612x612&w=0&h=kFFhoXpDoF6jCmerJe-cZzOMKRvpl2orilNip2t3McU=" alt="">
    </div>
    <div class="gallery-item">
      <img src="https://i.kinja-img.com/gawker-media/image/upload/c_fill,f_auto,fl_progressive,g_center,h_675,pg_1,q_80,w_1200/53df428afe11e2a18bbb7ef134761abb.jpg" alt="">
    </div>
    <div class="gallery-item">
      <img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Fitness/Articles/Personal+Trainer/personal+trainer-front.jpg" alt="">
    </div>
</div>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}
.gallery {
  display: flex;
  flex-wrap: wrap;  
  max-width: 100%;
  margin: -10px -10px;
}
.gallery-item {
  width: 25%;
  padding: 10px;
  overflow: hidden;
}
.gallery-item img {  
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.