From 4ed594509abe035956b917cef9d07a53f6333720 Mon Sep 17 00:00:00 2001
From: Jason Pamental <jason@rwt.io>
Date: Wed, 29 Aug 2018 08:43:55 -0400
Subject: [PATCH] Update to width reflow

---
 variable-fonts/grade.html          |  8 +++++++-
 variable-fonts/italic.html         | 14 +++++++++++++-
 variable-fonts/optical-sizing.html |  8 +++++++-
 variable-fonts/sample-page.html    | 10 ++++++++--
 variable-fonts/slant.html          | 14 +++++++++++++-
 variable-fonts/weight.html         | 14 +++++++++++++-
 variable-fonts/width.html          | 16 ++++++++++++++--
 7 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/variable-fonts/grade.html b/variable-fonts/grade.html
index 6234da04..0551b217 100644
--- a/variable-fonts/grade.html
+++ b/variable-fonts/grade.html
@@ -35,10 +35,16 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
+        grid-template-columns: 1fr;
         grid-gap: 1rem;
     }
 
+    @media screen and (min-width: 42rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
     textarea {
       font-family: monospace;
       display: block;
diff --git a/variable-fonts/italic.html b/variable-fonts/italic.html
index d3e51093..fb5bf641 100644
--- a/variable-fonts/italic.html
+++ b/variable-fonts/italic.html
@@ -35,10 +35,22 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-template-columns: 1fr;
         grid-gap: 1rem;
     }
 
+    @media screen and (min-width: 35rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media screen and (min-width: 52rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+
     textarea {
       font-family: monospace;
       display: block;
diff --git a/variable-fonts/optical-sizing.html b/variable-fonts/optical-sizing.html
index efb8fecb..defb0c4a 100644
--- a/variable-fonts/optical-sizing.html
+++ b/variable-fonts/optical-sizing.html
@@ -35,10 +35,16 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
+        grid-template-columns: 1fr;
         grid-gap: 1rem;
     }
 
+    @media screen and (min-width: 50rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
     textarea {
       font-family: monospace;
       display: block;
diff --git a/variable-fonts/sample-page.html b/variable-fonts/sample-page.html
index 0cb459cb..a6d5ad84 100644
--- a/variable-fonts/sample-page.html
+++ b/variable-fonts/sample-page.html
@@ -35,8 +35,14 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(29rem,1fr));
-        grid-gap: 1.5rem;
+        grid-template-columns: 1fr;
+        grid-gap: 1rem;
+    }
+
+    @media screen and (min-width: 58rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
     }
 
     textarea {
diff --git a/variable-fonts/slant.html b/variable-fonts/slant.html
index 08a9f8ed..12704a24 100644
--- a/variable-fonts/slant.html
+++ b/variable-fonts/slant.html
@@ -35,10 +35,22 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-template-columns: 1fr;
         grid-gap: 1rem;
     }
 
+    @media screen and (min-width: 35rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media screen and (min-width: 52rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+
     textarea {
       font-family: monospace;
       display: block;
diff --git a/variable-fonts/weight.html b/variable-fonts/weight.html
index c2c2ee87..261a0eb1 100644
--- a/variable-fonts/weight.html
+++ b/variable-fonts/weight.html
@@ -43,10 +43,22 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-template-columns: 1fr;
         grid-gap: 1rem;
     }
 
+    @media screen and (min-width: 35rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media screen and (min-width: 52rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+
     textarea {
       font-family: monospace;
       display: block;
diff --git a/variable-fonts/width.html b/variable-fonts/width.html
index aa7c3246..069bdbff 100644
--- a/variable-fonts/width.html
+++ b/variable-fonts/width.html
@@ -38,15 +38,27 @@
       font: 1.2em "Amstelvar VF", Georgia, serif;
       margin: 20px;
       padding: 0;
-    }
+    }    
     
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-template-columns: 1fr;
         grid-gap: 1rem;
     }
 
+    @media screen and (min-width: 35rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media screen and (min-width: 52rem) {
+      .wrapper {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+
     textarea {
       font-family: monospace;
       display: block;