How can I fill space with css grid in IE11?

Asked Jan 13 '19 at 04:13

Active Jan 14 '19 at 17:21

Viewed 263 times

I set my CSS like this:

.container {
  display: grid;
  grid-template-rows: auto 1fr 7%;
}

I went over to https://autoprefixer.github.io/ which transformed it to:

.container {
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr 7%;
    grid-template-rows: auto 1fr 7%;
}

The originally basically ignored 1fr such that the second row is its natural height. The ms-specific code made the first row just disappear, the second row lose its 100% width, and then nothing else. Edge, chrome, etc is not impacted at all by the change as expected. Not sure the proper way to get 100% fill here.

edited Jan 14 '19 at 17:21

Michael Benjamin

307,417
93
525
644

asked Jan 13 '19 at 04:13

Dave Stein

7,671
12
50
93

Autoprefixers for ie give you not the current spec for css-grid, but the older one, which was changed. So a lot of properties are not availible. I would personally not try to work with grid in ie and simply create a fallback if support is needed. – Никита Гулис Jan 13 '19 at 05:15
I haven’t done CSS in a long time. IE still support that weird commented out tag so only IE version whatever reads it? So I can have IE11 sheet – Dave Stein Jan 13 '19 at 12:19
I can be mistaken, but i think they actually were the first ones to remove it or smth. – Никита Гулис Jan 13 '19 at 13:02
possible guidance: https://stackoverflow.com/q/45786788/3597276 – Michael Benjamin Jan 14 '19 at 17:21

How can I fill space with css grid in IE11?

0 Answers0