<div class="grid">
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?1"
        width=300
        height=200
        alt="Image 1"
     />
  </div>
  
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?2"
        width=300
        height=200
        alt="Image 2"
     />
  </div>
  
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?3"
        width=300
        height=200
        alt="Image 3"
     />
  </div>
  
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?4"
        width=300
        height=200
        alt="Image 4"
     />
  </div>
  
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?5"
        width=300
        height=200
        alt="Image 5"
     />
  </div>
  
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?6"
        width=300
        height=200
        alt="Image 6"
     />
  </div>
  
  <div class="cell">
    <img
        src="https://loremflickr.com/300/200?7"
        width=300
        height=200
        alt="Image 7"
     />
  </div>
</div>

@gutter-size: 20px;

.grid {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
}

.cell {
  padding: (@gutter-size / 2);
}

img {
  display: block;
}