fix example

Author: thingsym

doc/css/grid-type.css

@@ -176,9 +176,9 @@ h2 {
   .grid--responsive > [class*="grid__col"] {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     margin: 0 1% 2%;
   }
 }
@@ -197,9 +197,9 @@ h2 {
   .grid--responsive > [class*="grid__col"] {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     margin: 0 1% 2%;
   }
 }
@@ -339,9 +339,9 @@ h2 {
   .grid-margin-offset--responsive > [class*="grid__col"] {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     margin-right: 0;
     margin-bottom: 2%;
   }
@@ -360,9 +360,9 @@ h2 {
   .grid-margin-offset--responsive > [class*="grid__col"] {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     margin-right: 0;
     margin-bottom: 2%;
   }

doc/css/responsive.css

@@ -91,16 +91,16 @@ footer {
   .HolyGrail-aside {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
   }
   .HolyGrail-nav {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     -webkit-order: 0;
     -ms-flex-order: 0;
     order: 0;
@@ -127,16 +127,16 @@ footer {
   .HolyGrail-aside {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
   }
   .HolyGrail-nav {
     box-sizing: border-box;
     width: 100%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     -webkit-order: 0;
     -ms-flex-order: 0;
     order: 0;
@@ -145,7 +145,6 @@ footer {
 
 .HolyGrail-body {
   background: #a5c3e2;
-  border: 1px solid #130e7d;
 }
 
 header,

doc/example/example.html

@@ -813,27 +813,27 @@ <h3>Rows Reverse</h3>
 <h3>Columns</h3>
 
 <div class="grid--column">
-<div class="grid__col-1">
+<div class="grid__col">
     1
 </div>
-<div class="grid__col-2">
+<div class="grid__col">
     2
 </div>
-<div class="grid__col-3">
+<div class="grid__col">
     3
 </div>
 </div>
 
 <h3>Columns Reverse</h3>
 
 <div class="grid--column-reverse">
-<div class="grid__col-1">
+<div class="grid__col">
     1
 </div>
-<div class="grid__col-2">
+<div class="grid__col">
     2
 </div>
-<div class="grid__col-3">
+<div class="grid__col">
     3
 </div>
 </div>

doc/sass/responsive.scss

@@ -71,7 +71,6 @@ footer {
 
 .HolyGrail-body {
   background: #a5c3e2;
-  border: 1px solid #130e7d;
 }
 
 header,