CSS grid auto width in IE and MS Edge not working

user_1200463 0
Viewed 7858

Have an IE and Edge specific problem. Fooling around with "CSS grid layout" and auto width seems not to work in IE 10/11 or even in newest version of Edge. (Works fine in Chrome and FireFox.)

CodePen link

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px auto;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px auto;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  background-color: red;
}

.test .sec2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
}
<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>

So is the error on my part or did Microsoft make lame stuff again?

Besides I thought that Edge should have a full implementation of the latest CSS grid but I guess not since I still need to use -ms.

microsoft-edge internet-explorer-11 css-grid css
2 Answers

auto in IE != auto in modern browsers.

auto in IE strictly equals minmax(min-content, max-content).

In modern browsers auto still essentially acts like minmax(min-content, max-content) except it is able to exceed the size of the max-content value when stretched by the align-content and justify-content properties. IE doesn't allow that. auto in IE cannot exceed the size of the max-content value.

Another difference is that auto in IE cannot be used inside a minmax() function. This is because auto = minmax(min-content, max-content) in IE and minmax() functions are not allowed to be nested inside one another.

Modern browsers allow auto to be used inside minmax() because auto has different functionalities depending on if it is used as a min value, a max value or used on it's own.

'auto'

As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

source: https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-auto

To take up the remaining space in a grid, use 1fr instead.

See this series of articles on how to effectively work with the IE implementation of CSS Grid: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

user_16110580
Related