CSS Grid | 11 Image gallery

In this example below you will see how to do a CSS Grid | 11 Image gallery with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SimonNonnis, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SimonNonnis ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Grid | 11 Image gallery</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="overlay">
    <div class="overlay-inner">
      <button class="close">√ó Close</button>
      <img>
    </div>
</div>

<section class="gallery">
</section>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SimonNonnis/css-grid-or-11-image-gallery-vdyJdq */
/* General */
:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 10px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: linear-gradient(110deg, #30a6f2, #224de3);
  min-height: 100vh;
  margin: 50px;
  background-position: fixed;
  letter-spacing: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}

.close {
  background: none;
  color: black;
  border: 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
}

.item {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
}

.item img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.item__overlay {
  background: #ff7f5099;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  transition: 0.4s ease-out;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  cursor: pointer;
}

.item__overlay button {
  background: none;
  border: 2px solid white;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  padding: 1em 1.5em;
}

.item:hover .item__overlay {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.item.v2 {
  grid-row: span 2;
}
.item.v3 {
  grid-row: span 3;
}
.item.v4 {
  grid-row: span 4;
}

.item.h2 {
  grid-column: span 2;
}
.item.h3 {
  grid-column: span 3;
}
.item.h4 {
  grid-column: span 4;
}





.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 2;
}

.overlay.open {
  display: grid;
  align-items: center;
  justify-items: center;
}

.overlay-inner {
  background: white;
  max-width: 700px;
  padding: 20px;
  text-align: right;
}
    
.overlay img {
  width: 100%;
}

.close {
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/SimonNonnis/css-grid-or-11-image-gallery-vdyJdq */
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var gallery = document.querySelector('.gallery');
var overlay = document.querySelector('.overlay');
var overlayImg = overlay.querySelector('img');
var overlayClose = overlay.querySelector('.close');
var digits = Array.from({ length: 50 }, function () {
  return [randomNumber(4), randomNumber(4)];
}).concat([[1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]]);
var html = digits.map(generateHTML).join('');

gallery.innerHTML = html;

var items = document.querySelectorAll('.item');
items.forEach(function (item) {
  return item.addEventListener('click', handleClick);
});
overlayClose.addEventListener('click', close);

// Utils
function generateHTML(_ref) {
  var _ref2 = _slicedToArray(_ref, 2),
      h = _ref2[0],
      v = _ref2[1];

  return '\n    <div class="item h' + h + ' v' + v + '">\n      <img src="https://source.unsplash.com/random/500x500/?' + randomNumber(20) + '">\n      <div class="item__overlay">\n        <button>View \u2192</button>\n      </div>\n    </div>\n  ';
}

function randomNumber(limit) {
  return Math.floor(Math.random() * limit) + 1;
}

function handleClick(e) {
  var src = e.currentTarget.querySelector('img').src;
  overlayImg.src = src;
  overlay.classList.add('open');
  document.body.style.overflowY = "hidden";
}

function close() {
  overlay.classList.remove('open');
  document.body.style.overflowY = "auto";
}

Comments