IE 和 MS Edge 中的 CSS 网格自动宽度不起作用答案

【问题标题】：CSS grid auto width in IE and MS Edge not workingIE 和 MS Edge 中的 CSS 网格自动宽度不起作用
【发布时间】：2018-01-06 03:16:30
【问题描述】：

遇到 IE 和 Edge 特定问题。玩弄“CSS 网格布局”和auto 宽度似乎在 IE 10/11 甚至最新版本的 Edge 中都不起作用。（在 Chrome 和 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>

那么是我的错误还是微软再次制造了蹩脚的东西？

此外，我认为 Edge 应该具有最新 CSS 网格的完整实现，但我想不会，因为我仍然需要使用 -ms。

【问题讨论】：

IE10/11 使用较旧的语法，Edge 版本 16 之前也是如此。caniuse.com/#search=grid Microsoft 浏览器总是一团糟。
@Rob Grid 在 IE10 中工作。
如果您只打算使用网格的第二列（sec2 从第 3 列开始，而 sec 1 只占 1 列），我建议您使用网格排水沟。 developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap。我最近也开始使用 Grid，对于现代浏览器来说，这是一种乐趣。对于任何与微软相关的事情，我都觉得很痛苦。
@VadimOvchinnikov 是的。记错了。
@Rob 您对旧语法的评论不相关，因为 OP 成功使用了它。他为 IE/Edge 添加了手动单元格定位，并使用额外的列伪造了grid-gap。

标签： css internet-explorer-11 microsoft-edge css-grid

【解决方案1】：

IE/Edge CSS Grid 布局根据旧specs where 工作的问题

auto 等价于minmax(min-content, max-content)。

并根据新specs

auto
最多与max-content 相同。作为最小值，表示占据grid track 的网格项的最大最小尺寸（由min-width/min-height 指定）。

在这个例子中你不需要auto 值，你需要1fr 来占据所有剩余的宽度。顺便说一句，您的代码中有些样式是多余的。演示：

.test {
  width 100%;
}

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

.test .sec1 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1;  /* redundant */
  -ms-grid-column: 1;  /* redundant */
  background-color: red;
}

.test .sec2 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1; /* redundant */
  -ms-grid-column: 3;
  /* all this value will be used by default due to auto-placement of grid items (which is not working in IE/Edge) */
  grid-column-start: 2; /* redundant */
  grid-column-end: 3; /* redundant */
  grid-row-start: 1; /* redundant */
  grid-row-end: 2; /* redundant */
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>

【讨论】：

【解决方案2】：

auto 在 IE 中！= auto 在现代浏览器中。

auto 在 IE 中严格等于 minmax(min-content, max-content)。

在现代浏览器中，auto 的行为本质上仍与minmax(min-content, max-content) 类似，只是它在被align-content 和justify-content 属性拉伸时能够超过max-content 值的大小。 IE 不允许这样做。 IE 中的auto 不能超过max-content 值的大小。

另一个区别是 IE 中的 auto 不能在 minmax() 函数中使用。这是因为 IE 中的 auto = minmax(min-content, max-content) 和 minmax() 函数不允许相互嵌套。

现代浏览器允许在minmax() 内部使用auto，因为auto 具有不同的功能，具体取决于它是用作最小值、最大值还是单独使用。

'自动'

作为最大值，与 max-content 相同。作为最小值，表示占据网格轨道的网格项的最大最小尺寸（由 min-width/min-height 指定）。

注意：自动轨道尺寸（并且只有自动轨道尺寸）可以通过 align-content 和 justify-content 属性进行拉伸。

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

要占用网格中的剩余空间，请改用1fr。

请参阅本系列文章，了解如何有效地使用 CSS Grid 的 IE 实现： https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

【讨论】：