jquery - Rearrange image grid upon browser resize? -

jquery - Rearrange image grid upon browser resize? -

i have pure css image grid wish improve create more responsive browser window size. columns , rows fixed, means when narrow browser window columns squashed, , ideal thing in scenario switch on fewer columns , more rows minimize image cropping (since images landscape oriented).

html structure:

<div class='padding'> <div class='column'> <div class='row'> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> </div> <div class='row'> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> </div> <div class='row'> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> </div> </div> <div class='column'> <div class='row'> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> </div> <div class='row'> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> </div> <div class='row'> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> <div class='thumb'> <div class='image' style='background-image:url(url)'></div> </div> </div> </div>

css:

.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; }

here's jsfiddle: https://jsfiddle.net/xybosmzm/

i'm not sure start, guess need utilize javascript/jquery this?

what need called media queries can read more here, when added:

.column { width:100% } @media screen , (min-width:470px) { .column { width:50%; } }

the @media create when screen @ to the lowest degree 470px wide column 50% width of screen otherwise take whole screen width:100%.

here simple example seek resizing screen , @ 1 point images collapse 4 in row 2

jquery html css responsive-design image-gallery