From 716d24cc29c8e5f6fad87247c2308d64e6bdbe6c Mon Sep 17 00:00:00 2001
From: Dan Leech <danleech@users.noreply.github.com>
Date: Wed, 26 Apr 2017 18:12:42 +0100
Subject: [PATCH] Adds basic fallback for CSS grid

---
 README.md                   |  2 +-
 _sass/_components.grid.scss | 24 ++++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index c362d7579..3f40ac2b2 100644
--- a/README.md
+++ b/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
diff --git a/_sass/_components.grid.scss b/_sass/_components.grid.scss
index 7ed718015..b088d1af6 100644
--- a/_sass/_components.grid.scss
+++ b/_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