title: Rearrange image grid upon browser resize?
body: <p>I have this pure css image grid that I wish to improve to make it more responsive to the browser window size. The columns and rows are currently fixed, which means that when you narrow the browser window the columns will get squashed, and the ideal thing in that scenario would be to switch over to fewer columns and more rows to minimize the image cropping (since the images are originally landscape oriented).</p>
  
  <p>HTML structure:</p>
  
  <pre><code>&lt;div class='padding'&gt;
      &lt;div class='column'&gt;
          &lt;div class='row'&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='column'&gt;
          &lt;div class='row'&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='thumb'&gt;
                  &lt;div class='image' style='background-image:url(URL)'&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.padding {
      position:absolute;
      top:8px;
      right:8px;
      bottom:8px;
      left:8px;
      box-sizing:border-box;
      -webkit-box-sizing:border-box;
      -o-box-sizing:border-box;
      -moz-box-sizing:border-box;
      -ms-box-sizing:border-box;
  }
  
  .column {
      position:relative;
      float:left;
      width:50%;
      height:100%;
  }
  
  .row {
      position:relative;
      display:flex;
      display:-webkit-flex;
      display:-o-flex;
      display:-moz-flex;
      display:-ms-flexbox;
      width:100%;
      height:calc(100%/3);
  }
  
  .thumb {
      position:relative;
      width:100%;
      margin-top:8px;
      margin-right:8px;
      margin-left:8px;
      margin-bottom:8px;
      overflow:hidden;
  }
  
  .image {
      position:absolute;
      top:0px;
      right:0px;
      bottom:0px;
      left:0px;
      background-size:cover;
      background-position:center;
  }
  </code></pre>
  
  <p>Here's a jsfiddle: <a href="https://jsfiddle.net/xybosmzm/" rel="nofollow">https://jsfiddle.net/xybosmzm/</a></p>
  
  <p>I'm not sure where to start, but I guess I will need to use some javascript/jquery to do this?</p>