Yet another grid in IE conundrum

programming web dev
1

Greetings.
I am taking this question to this forum because 1) there seem to be some Windows smarts here, and 2) Kirupa’s advice on handling CSS has been among the most cogent I’ve found on the Web, recently.
The question is familiar, I think. Here we have some formatting for page layout:

.layout {
  display: grid;
  grid-template-columns: 1fr 5fr;
}

contents {
  grid-column: 1;
  grid-row:    1;
  position:    fixed;
  top:    0;
  bottom: 0;
  overflow-y: scroll;
  padding:    2em 4em 2em 2em;
  background-color: #ffffff;
  min-width:  20em;
}

body-text {
  grid-column: 2 / 6;
  grid-row:    1;
  max-width:   50em;
  margin:      0 0 0 20em;
}

… and here is the same style code, but “enhanced” so that IE will presumably support it. Enhancements based on current Web advice, plus an experiment with an autoprefixer, which returned code that was about the same:

.layout {
  display:               -ms-grid;
  display:                   grid;
  -ms-grid-columns:          1fr 5fr;
      grid-template-columns: 1fr 5fr;
  -ms-grid-rows:             1;
      grid-template-rows:    1;
}

contents {
  -ms-grid-column:  1;
      grid-column:  1;
  -ms-grid-row:     1;
      grid-row:     1;
  position:         fixed;
  top:              0;
  bottom:           0;
  overflow-y:       scroll;
  padding:          2em 4em 2em 2em;         /* top right bottom left */
  background-color: #ffffff;
  min-width:        20em;
}

body-text {
  -ms-grid-column:       2;
  -ms-grid-column-span:  4;
      grid-column:       2 / 6;
  -ms-grid-row:          1;
      grid-row:          1;
  max-width:             50em;
  margin:                0 0 0 20em;         /* top right bottom left */
}

What happens? IE handles the non-custom CSS fairly well, except that the “body-text” area spans the entire browser window. For the custom CSS, the “body-text” area is squooshed into column1 along with (and beneath) the “contents” area.
These are the only three styles that mention the grid at all.
Any thoughts? I appreciate your help.

2

I’m a bit stumped! I have no idea why it isn’t working. The appropriate ms-prefixes are there, and the inconsistent support between the old IE grid support and new W3C support is also properly accounted for :frowning:

3

Wow, that is not the answer I expected!
Thank you for replying promptly, and in person. I also owe you thanks for your most useful descriptions of using a script to manage CSS.
At least, this tells me I’m on the right track, and there must be some odd interaction between the layout and some other code—but is that other code CSS, or is it the HTML?
If I figure out what’s going on (or a friend does), I’ll let the forum know.
Best wishes!