title: CSS Grid with IE11 specs - grid collapses on itself
body: <p>I'm having an issue getting the CSS grid to work. As far as I know, I am following the spec for the IE10/11 specification for this. My initial research led me to: <a href="https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-edge-and-ie-11-even-with-ms-prefix">CSS Grid Layout not working in Edge and IE 11 even with -ms prefix</a> - and tried implementing suggested changes. </p>
  
  <p>my code is below:</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>.filter-item-grid {
   display: grid;
   display: -ms-grid;
    grid-template-columns: auto auto;
    -ms-grid-columns: 267px 267px;
    -ms-grid-rows: 1fr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="filter-item-grid"&gt;
    &lt;div class="letter-list__filter-item"&gt;
        &lt;h3 class="letter-list__filter-title"&gt;
          &lt;a href="#"&gt;Headline&lt;/a&gt;
        &lt;/h3&gt;
        &lt;p&gt;Sub headline&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="letter-list__filter-item"&gt;
        &lt;h3 class="letter-list__filter-title"&gt;
          &lt;a href="#"&gt;Headline&lt;/a&gt;
        &lt;/h3&gt;
        &lt;p&gt;Sub headline&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="letter-list__filter-item"&gt;
        &lt;h3 class="letter-list__filter-title"&gt;
          &lt;a href="#"&gt;Headline&lt;/a&gt;
        &lt;/h3&gt;
        &lt;p&gt;Sub headline&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="letter-list__filter-item"&gt;
        &lt;h3 class="letter-list__filter-title"&gt;
          &lt;a href="#"&gt;Headline&lt;/a&gt;
        &lt;/h3&gt;
        &lt;p&gt;Sub headline&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When viewing this markup in IE, it looks as if everything is absolutely positioned in the same spot. As per the attached answer I'm:</p>
  
  <ol>
  <li>Using vendor prefixes</li>
  <li>not relying on <code>auto</code> for the MS fallback</li>
  <li>Not using <code>repeat()</code> </li>
  <li>explicitly stating position of each item. </li>
  </ol>
  
  <p>What specifically needs to change to fully support the IE specification for CSS grid? Or is it reccomended to use the <code>@supports</code> CSS query?</p>