"gallery grid"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/terda12/pen/KpXejR?depth=everything&limit=all&order=popularity&page=8&q=thumbnail&show_forks=false" /> <style class="cp-pen-styles">/* Code mostly copied from https://github.com/gpbl/isomorphic500/blob/master/src/style/ThumbnailCollection.scss */ html { font-size: 16px; } #gallery { max-width: 680px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .thumbnail-wrapper { background-color: #333; min-width: 12rem; min-height: 8rem; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-preferred-size: 8rem; flex-basis: 8rem; margin-right: 2px; margin-bottom: 2px; } .thumbnail-wrapper:nth-child(5n) { -ms-flex-preferred-size: 14rem; flex-basis: 14rem; } .thumbnail-wrapper:nth-child(2n+1) { -ms-flex-preferred-size: 10rem; flex-basis: 10rem; } .thumbnail-wrapper:nth-child(7n+4) { -ms-flex-preferred-size: 20rem; flex-basis: 20rem; min-height: 12rem; } .thumbnail { width: 100%; height: 100%; position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; } .thumbnail:hover { opacity: 0.9; -webkit-transition: .2s ease-in; transition: .2s ease-in; }</style></head><body> <div id="gallery"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var images = [ "https://i.imgur.com/KaPoFDj.jpg", "http://proof.nationalgeographic.com/files/2015/05/MM8190_12_09_30_10398-copy.jpg", "http://farm9.staticflickr.com//8868//18205140545_c48ca49018_h.jpg", "http://drscdn.500px.org/photo/111857581/m%3D2048/2ecfe0e70accd597de673b532e8a8666", "http://fc02.deviantart.net/fs70/f/2014/029/9/1/rophaien_by_tobiasrichter-d4tniwk.jpg", "https://i.imgur.com/CQg225T.jpg", "http://farm3.staticflickr.com//2946//15449458345_4457eacb17_b.jpg", "https://i.imgur.com/Y2802th.jpg", "https://i.imgur.com/KZsmUi2.jpg" ]; var gallery = document.getElementById("gallery"); for (var i = 0; i < images.length; i++) {if (window.CP.shouldStopExecution(1)){break;} var thumbnailWrapper = document.createElement("div"); thumbnailWrapper.className = "thumbnail-wrapper"; var thumbnail = document.createElement("a"); thumbnail.className = "thumbnail"; thumbnail.setAttribute('style', 'background-image:url(\"' + images[i] + '\");'); thumbnail.setAttribute('href', images[i]); thumbnailWrapper.appendChild(thumbnail); gallery.appendChild(thumbnailWrapper); } window.CP.exitedLoop(1); console.log(gallery) //# sourceURL=pen.js </script> </body></html>

Related: See More

BLK• Design System
arrow key navigation thumbnail gallery modal view
Pinterest-like Responsive Grid
Grid Columns Divider

Questions / Comments: