20 - CSS Grid Image Gallery Grid Style Added

Author: jonathanedempsey

20 - CSS Grid Image Gallery/image-gallery-START.html

@@ -51,9 +51,40 @@
       border: 0;
     }
 
-    .gallery {}
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 100px);
+      grid-auto-rows: 100px;
+      grid-auto-flow: dense;
+    }
+
+    .item {
+      overflow: hidden;
+    }
+
+    .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;
@@ -102,7 +133,7 @@
       return Math.floor(Math.random() * limit + 1);
     }
 
-    const digits = Array.from({ length: 50}, () => [randomNumber(4), randomNumber(4)]);
+    const digits = Array.from({ length: 50}, () => [randomNumber(4), randomNumber(4)]).concat([[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]]);
 
     const html = digits.map(generateHTML).join('');
     gallery.innerHTML = html;