index.html

<div class="grid">
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-1" alt="" src="/image-1" />
    </div>
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-2" alt="" src="/image-2" />
    </div>
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 150%">
      <img class="lazyloaded" data-src="/image-3" alt="" src="/image-3" />
    </div>
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-4" alt="" src="/image-4" />
    </div>
    >
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-5" alt="" src="/image-5" />
    </div>
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-6" alt="" src="/image-6" />
    </div>
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-7" alt="" src="/image-7" />
    </div>
    >
  </article>
</div>