Adds basic fallback for CSS grid

README.md

@@ -8,7 +8,7 @@ SVG icons for popular brands. [See them all on one page at **simpleicons.org**](
 - [x] Jekyll code for sorting icons by hue
 - [ ] JS search function
 - [ ] Analytics tracking for icon clicks
-- [ ] CSS grid fallback
+- [x] CSS grid fallback
 - [x] Social sharing tags
 - [ ] AMP support
 - [ ] New README.md

_sass/_components.grid.scss

@@ -1,13 +1,17 @@
 .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9rem,1fr));
-    grid-auto-rows: 6rem;
-    grid-column-gap: 0.375rem;
-    grid-row-gap: 0.375rem;
-    grid-auto-flow: dense;
+    display: flex;
+    flex-wrap: wrap;
     list-style: none;
     margin: 1.5rem;
     padding: 0;
+    @supports (display: grid) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(9rem,1fr));
+        grid-auto-rows: 6rem;
+        grid-column-gap: 0.375rem;
+        grid-row-gap: 0.375rem;
+        grid-auto-flow: dense;
+    }
     @media (min-width: 720px) {
         margin: 3rem;
     }
@@ -16,6 +20,11 @@
 .grid-item {
     background-color: #757575;
     text-align: center;
+    @supports not (display: grid) {
+        border: 0.1875rem solid #FFF;
+        padding: 0 0 0.75rem;
+        width: 20%;
+    }
     svg {
         height: 1.5rem;
         width: 1.5rem;
@@ -30,6 +39,9 @@
     grid-column: -2 / -1;
     grid-row-end: span 2;
     height: auto;
+    @supports not (display: grid) {
+        width: 100%;
+    }
     @media (min-width: 21.75rem) {
         // 21.75rem is the minimum viewport
         // width with multiple columns