<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 0 0 @gutter-size;
}

img {
  display: block;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.