Use more robust way of removing whitespace.

As per this Tweet by @thierryk:
https://twitter.com/thierrykoblentz/status/305152267374428160

A change introduced in Chrome 25 breaks the previously used method of
removing whitespace. This update to csswizardry-grids uses a far more
robust method, but this commit can be picked back out if the Chrome dev
team revert their changes.

Author: csswizardry

CHANGELOG.md

@@ -1,2 +1,3 @@
 * 1.0.0     Initial release
 * 1.0.1     Make base grid classes follow silencing rules
+* 1.1       Use more robust, markup-based method for removing whitespace

README.md

@@ -36,9 +36,9 @@ like this:
 
         <div class="grid__item  one-whole  lap-one-half  desk-two-thirds">
             ...
-        </div>
+        </div><!--
 
-        <div class="grid__item  one-whole  lap-one-half  desk-one-third">
+     --><div class="grid__item  one-whole  lap-one-half  desk-one-third">
             ...
         </div>
 
@@ -50,9 +50,9 @@ If you are using silent classes then your HTML might look like this:
 
         <div class="content">
             ...
-        </div>
+        </div><!--
 
-        <div class="sub-content">
+     --><div class="sub-content">
             ...
         </div>
 
@@ -79,6 +79,12 @@ If you are using silent classes then your HTML might look like this:
             @extend %desk-one-third;
         }
 
+The empty HTML comments are to remove whitespace caused by using `inline-block`.
+Prior to v1.1 this was tackled by using some
+[`[letter|word]-spacing` trickery](https://github.com/csswizardry/csswizardry-grids/blob/60a5075ac65282bb24fa5a5d5ed32a060ce2975f/csswizardry-grids.scss#L64-L65),
+however Chrome 25 introduced a change which meant this method now broke
+csswizardry-grids.
+
 ## Demo
 
 There is a very simple demo which can be found at

csswizardry-grids.scss

@@ -54,34 +54,28 @@ $class-type:            unquote(".");
  * 1. Allow the grid system to be used on lists.
  * 2. Remove any margins and paddings that might affect the grid system.
  * 3. Apply a negative `margin-left` to negate the columns’ gutters.
- * 4. Remove whitespace caused by `inline-block` elements.
  */
 #{$class-type}grid{
     list-style:none;                /* [1] */
     margin:0;                       /* [2] */
     padding:0;                      /* [2] */
     margin-left:-$gutter;           /* [3] */
-    letter-spacing:-0.31em;         /* [4] */
-    word-spacing:-0.43em;           /* [4] */
 }
 
 
 /**
  * 1. Cause columns to stack side-by-side.
  * 2. Space columns apart.
  * 3. Align columns to the tops of each other.
- * 4. Reinstate removed whitespace.
- * 5. Required to combine fluid widths and fixed gutters.
+ * 4. Required to combine fluid widths and fixed gutters.
  */
 #{$class-type}grid__item{
     display:inline-block;           /* [1] */
     padding-left:$gutter;           /* [2] */
     vertical-align:top;             /* [3] */
-    letter-spacing:normal;          /* [4] */
-    word-spacing:normal;            /* [4] */
-    -webkit-box-sizing:border-box;  /* [5] */
-       -moz-box-sizing:border-box;  /* [5] */
-            box-sizing:border-box;  /* [5] */
+    -webkit-box-sizing:border-box;  /* [4] */
+       -moz-box-sizing:border-box;  /* [4] */
+            box-sizing:border-box;  /* [4] */
 }