Update to width reflow

Author: jpamental

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;

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;

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;

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 {

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;

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;

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;