title: Can't get CSS grid to create an empty cell though all cells are rectangular
body: <p>I am trying to create a grid where the last cell on the first row is empty by using '.' with CSS grid-template-areas. As far as I am aware every shape is a rectangle.Here is the desired layout:<br/>
  <br/>
  Contrast:    Default    Low <br/>
  Font-size:   Default    Large    Extra large <br/>
  Spacing:     Default    Wide     Extra wide <br/></p>
  <p>But it keeps coming out like this: <br/>
  <br/>
  Contrast:    Default    Low    Font-size:<br/>
  Default      Large      Extra-large  Spacing: <br/>
  Default      Wide       Extra wide <br/></p>
  <p>I have copied from 3 different tutorials, but I am still stuck.</p>
  <p>code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.1 {
    grid-area: 1;
  }
  
  .2 {
    grid-area: 2;
  }
  
  .3 {
    grid-area: 3;
  }
  
  .4 {
    grid-area: 4;
  }
  
  .5 {
    grid-area: 5;
  }
  
  .6 {
    grid-area: 6;
  }
  
  .7 {
    grid-area: 7;
  }
  
  .8 {
    grid-area: 8;
  }
  
  .9 {
    grid-area: 9;
  }
  
  .10 {
    grid-area: a;
  }
  
  .11 {
    grid-area: b;
  }
  
  .accessibilityGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "1 2 3 ." "4 5 6 7" "8 9 a b";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="accessibilityGrid"&gt;
    &lt;div class="1"&gt;Contrast:&lt;/div&gt;
    &lt;div class="2"&gt;Default&lt;/div&gt;
    &lt;div class="3"&gt;Low&lt;/div&gt;
    &lt;div class="4"&gt;Font-size:&lt;/div&gt;
    &lt;div class="5"&gt;Default&lt;/div&gt;
    &lt;div class="6"&gt;Large&lt;/div&gt;
    &lt;div class="7"&gt;Extra large&lt;/div&gt;
    &lt;div class="8"&gt;Letter-spacing:&lt;/div&gt;
    &lt;div class="9"&gt;Default&lt;/div&gt;
    &lt;div class="10"&gt;Wide&lt;/div&gt;
    &lt;div class="11"&gt;Extra wide&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>