<div class="photoset -square -portrait"> <!--Can also do portrait or square, remove the "-" prefix-->
   <!--Add or remove some of these-->
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/343322f00cf3a6b7a4f460cbc766aa1c/tumblr_p773r1ugkd1wd32uro1_1280.jpg)" ></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/a8158f5113ac52008eb3fe86bc87eadd/tumblr_p773r1ugkd1wd32uro2_400.jpg)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/5091ebebffe12dd2b7b6e510ccfd141e/tumblr_p773r1ugkd1wd32uro3_400.jpg)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/7e95258e791956cfb963f99748084064/tumblr_p773r1ugkd1wd32uro4_400.jpg)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/81caa127eb8502865c3f4fb9cc710de7/tumblr_p773r1ugkd1wd32uro5_400.jpg)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/c62c2379b7fc2c16b0bc3c9efcc915ac/tumblr_p773r1ugkd1wd32uro6_400.jpg)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/ea9fe77f480a5328eb81335847cb711f/tumblr_p773r1ugkd1wd32uro7_400.jpg)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/470e6d187709ee3ecd0b1c71a287adc6/tumblr_p773r1ugkd1wd32uro8_400.png)"></a>
   <a href="https://blog.tumblr.com/image/0000000000" target="_blank" class="photo" style="background-image:url(https://78.media.tumblr.com/b5f5d5705000bf45b6f8903222bcba8d/tumblr_p773r1ugkd1wd32uro9_400.jpg)"></a>
</div>
<!--
Default tumblr photosets either output each on a new row or use JavaScript
With this you lose a tiny bit of freedom of custom fitting (unless you like more orderly aspect ratios then it's a gain) but you (also) gain it sorting itself out instantly,
-->

div.photoset {
   padding: 2px;
   background-color: #ffffff;
   max-width: 600px;
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   .photo {
      position: relative;
      flex-grow: 1; //They will fill space but actually want to take up the smallest space possible doing it, so you just need to stop it getting too small with min-width (otherwise they all bunch on the same line)
      min-width: calc(100% / 3); //This is the maximum number (3) in a row bit
      background-size: cover;
      background-position: center;
      
      @media screen and (max-width: 700px) {
         min-width: calc(100% / 2); //As simple as this for responsiveness without a delay you would get with JavaScript
      }
      @media screen and (max-width: 460px) {
         min-width: 100%;
      }
      &:after {
         //Aspect Ratio
         padding-top: 83.33333%; //For 5:6 height to width ratio
         display: block;
         content: "";
      }
      &:before {
         //Gaps
         z-index: 2;
         position: absolute;
         content: "";
         top: 0px;
         right: 0px;
         bottom: 0px;
         left: 0px;
         box-shadow: inset 0 0 0 2px #ffffff; //Cheaty way to make it look like there are gaps 😜
      }
      &:nth-child(1) {
         //Make first image big
         width: 100%;
      }
   }

   &.square .photo:after {
      padding-top: 100%;
   }
   &.portrait .photo:after {
      padding-top: 120%;
   }
}

body {
   background-color: #ece9e2;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 10px;
}