title: Grid area problem doesnt work with autofit
body: <p>So I have 9 divs and I tried to use autofit but it breaks my layout
  So when I stretch the layout to the minimun I want only 1 div</p>
  
  <pre><code>.grid {max-width: 1500px;display: grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));grid-gap: 2px;}
  
  * {box-sizing: border-box;} body {
  font-size: 1.4em;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #6e859c;
  padding: 0;
  margin: 0;
  background: #e8e9e9;} .grid {
  background: #fff;
  border-radius: 0.285em;
  box-shadow: 0 0.1em 0 0 rgba(0,0,0,0.1);
  margin: 45px auto;
  grid-template-areas: 
  "a b d d e h"
  "a c d d f h"
  "i i i j j j"} .item {  color: #fff;  text-shadow: 0 2px 0 rgba(110,133,156,0.18);  padding: 0.85em;  background: #6e859c; border: solid 1px rgba(110,133,156,0.15);  border-radius: 0.3em;}.item1 { grid-area: a;}.item2 {  grid-area: b;}.item3 {  grid-area: c;}.item4 { grid-area: d; }.item5 {  grid-area: e;}.item6 {  grid-area: f;}.item7 { grid-area: h;}.item8 {  grid-area: i;}.item9 {  grid-area: j;}
  </code></pre>