Switch blog post grid to flexbox for IE11 support

Author: michaelcarter

src/assets/styles/_writings.scss

@@ -1,22 +1,24 @@
 ul.writings {
-  display: grid;
-  grid-template-columns: 1fr;
-  column-gap: $spacing-1;
-  row-gap: $spacing-2;
+  display: flex;
+  flex-wrap: wrap;
   padding: 0;
 
-  @media only screen and (min-width: $bp-sm) {
-    grid-template-columns: 1fr 1fr;
-    column-gap: $spacing-3;
-    row-gap: $spacing-3;
-    padding: 0 $spacing-3;
+  @media only screen and (min-width: $layout-width-semi-wide) {
+    padding: 0;
   }
 
-  @media only screen and (min-width: $bp-md) {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
+  li {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0 0 $spacing-2 0;
 
-  @media only screen and (min-width: $layout-width-semi-wide) {
-    padding: 0;
+    @media only screen and (min-width: $bp-sm) {
+      max-width: 50%;
+      padding: 0 $spacing-2 $spacing-3 $spacing-2;
+    }
+
+    @media only screen and (min-width: $bp-md) {
+      max-width: 33.33%;
+    }
   }
 }