CSS Grid with IE11 specs - grid collapses on itself

Question

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: CSS Grid Layout not working in Edge and IE 11 even with -ms prefix - and tried implementing suggested changes.

my code is below:

.filter-item-grid {
 display: grid;
 display: -ms-grid;
  grid-template-columns: auto auto;
  -ms-grid-columns: 267px 267px;
  -ms-grid-rows: 1fr;
}

<div class="filter-item-grid">
  <div class="letter-list__filter-item">
      <h3 class="letter-list__filter-title">
        <a href="#">Headline</a>
      </h3>
      <p>Sub headline</p>
   </div>
   <div class="letter-list__filter-item">
      <h3 class="letter-list__filter-title">
        <a href="#">Headline</a>
      </h3>
      <p>Sub headline</p>
    </div>
    <div class="letter-list__filter-item">
      <h3 class="letter-list__filter-title">
        <a href="#">Headline</a>
      </h3>
      <p>Sub headline</p>
    </div>
    <div class="letter-list__filter-item">
      <h3 class="letter-list__filter-title">
        <a href="#">Headline</a>
      </h3>
      <p>Sub headline</p>
    </div>
</div>

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:

Using vendor prefixes
not relying on auto for the MS fallback
Not using repeat()
explicitly stating position of each item.

What specifically needs to change to fully support the IE specification for CSS grid? Or is it reccomended to use the @supports CSS query?

Scath · Accepted Answer · 2018-07-31T12:59:12.363

1

Changing the display setting to display: grid -ms-grid; and adding the new class to each makes it not collapse see snippet: Tested in IE11 and Chrome v67.0.3396.99.

.filter-item-grid {
  display: grid -ms-grid;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2; 
}
.new{
vertical-align: top;
padding-top:10px;
margin:0;
}

<div class="filter-item-grid">
  <div class="letter-list__filter-item new">
    <h3 class="letter-list__filter-title new">
      <a href="#">Headline</a>
    </h3>
    <p>Sub headline</p>
  </div>
  <div class="letter-list__filter-item new">
    <h3 class="letter-list__filter-title new">
      <a href="#">Headline</a>
    </h3>
    <p>Sub headline</p>
  </div>
  <div class="letter-list__filter-item new">
    <h3 class="letter-list__filter-title new">
      <a href="#">Headline</a>
    </h3>
    <p>Sub headline</p>
  </div>
  <div class="letter-list__filter-item new">
    <h3 class="letter-list__filter-title new">
      <a href="#">Headline</a>
    </h3>
    <p>Sub headline</p>
  </div>
</div>

edited Jul 31 '18 at 12:59

answered Jul 30 '18 at 15:43

Scath

3,777
10
29
40

It just puts everything into one column - I need to maintain the grid layout. – kawnah Jul 30 '18 at 17:13
Edited to maintain columns but it is putting some weird white space above first column still working on it. – Scath Jul 30 '18 at 17:46
Take a look at that. – Scath Jul 30 '18 at 17:50
1

do you have a
element anywhere on your page? use Modernizer.js to force IE to use block rendering or use a div instead of
eg.
– Rob Parsons Jul 30 '18 at 22:22
@RobParsons great tip! No, I do not but I'll remember this in the future. – kawnah Jul 31 '18 at 14:00
@kawnah did you look at the updated edit it now matches your example in IE – Scath Jul 31 '18 at 14:02

CSS Grid with IE11 specs - grid collapses on itself

1 Answers1