<div class="container">
  <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>
</div>
@gutter-size: 20px;

.container {
  border: 1px solid red;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -(@gutter-size / 2);
}

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

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.