CSS：显示：网格和/或 -ms-grid答案

【问题标题】：CSS: display: grid and/or -ms-gridCSS：显示：网格和/或 -ms-grid
【发布时间】：2017-12-20 19:26:21
【问题描述】：

有没有办法在一个样式表中同时使用display: grid/-ms-grid 或者我必须使用 HTML hack 或 JavaScript 来查询使用网格布局查看页面的浏览器类型？

例子：

以下样式似乎不起作用

.container {
  display: grid -ms-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(150px, 50px);
  grid-gap: 1vw;
  -ms-grid-columns: repeat(4, 1fr);
  -ms-grid-rows: repeat(150px, 50px);
  -ms-grid-gap: 1vw;
}

【问题讨论】：

就像添加到这个。 Microsoft 已使用 Windows 10 Creator 的秋季更新将 Edge 更新到 16，它支持通用 CSS 网格布局。不太确定 IE11，它仍会收到安全更新
IE11 永远不会升级。它只是接收安全更新。
它已经更新了，所以现在你不需要使用-ms-grid-columns，只要普通的grid-template就可以了，除非你还没有更新Windows 10
我在任何地方都没有看到针对 IE 的更新。它在我的 PC 上也不可见（安装了最新的 FCU 更新）。你指的是Edge吗？
此外，由于需要在 IE 中为子项指定明确的网格行和网格列数，因此 grid-template 无论如何对 IE 都不是很有帮助。

标签： css internet-explorer grid-layout css-grid

【解决方案1】：

这是我用于 IE 的：

我为所有当前浏览器支持添加了一个@supports()。如果您使用 @supports() 传入一个新的网格属性，例如 @supports(grid-area: auto) 以确保现代浏览器会选择它。不要使用 @suppports(display: grid) 因为 IE 会识别 display:grid 然后会使用它没有的现代网格属性。我不得不使用 1px 的边距来模拟 IE 中的网格间隙

* {
    box-sizing: border-box;
}

.item-bg {
    background-color: rgb(92, 182, 205);
    border-radius: 6px;
    margin: 1px;
}

.container {
    display: -ms-grid;
    
   width: 800px;
    height: 600px;
    -ms-grid-columns: 200px 1fr 1fr;
    -ms-grid-rows: 80px 1fr 1fr 100px;
    
    
    
    }


.header {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;

}
.sidebar {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;

}
.content-1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;

}
.content-2 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;

}
.content-3 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3/4;
}
.footer {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;
}
@supports(grid-area: auto){
    .item-bg {
        background-color: indianred;
        border-radius: 6px;
        margin: 0;
    }
    
    .container {
        display: grid;
        width: 750px;
        height: 600px;
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 80px 1fr 1fr 100px;
        grid-gap: 2px;
        }
    .header {
        grid-row: 1/2;
        grid-column: 1/4;
    
    }
    .sidebar {
        grid-row: 2/4;
        grid-column: 1/2;
    
    }
    .content-1 {
        grid-row: 2/3;
        grid-column: 2/4;
    
    }
    .content-2 {
        grid-row: 3/4;
        grid-column: 2/3;
    
    }
    .content-3 {
        grid-row: 3/4;
        grid-column: 3/4;
    }
    .footer {
        grid-row: 4/5;
        grid-column: 1/4;
    }
}

html是

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Basic Layout</title>
        <link rel="stylesheet" href="basiclayoutie.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="header item-bg">header</div>
            <div class="sidebar item-bg">sidebar</div>
            <div class="content-1 item-bg">Content-1</div>
            <div class="content-2 item-bg">Content-2</div>
            <div class="content-3 item-bg">Content-3</div>
            <div class="footer item-bg">Footer</div>
        </div>
    </body>
</html>

【讨论】：

【解决方案2】：

将新的 CSS Grid 布局语法转换为过时的 IE 确实是一个挑战。这不仅仅是添加一些供应商前缀的问题。

IE 对新版 CSS 网格布局的支持非常有限。没有IE支持

自动放置并选择其流程（grid-auto-flow CSS 属性）；
重复的列/行（repeat 函数和一些特殊值，如 auto-fill 和 auto-fit）。在某些情况下，这意味着您只需要用显式值替换，就像在您的情况下，您可以将 grid-template-columns: repeat(4, 1fr) 替换为 -ms-grid-columns: 1fr 1fr 1fr 1fr ，这将完美地工作。但是如果你有 grid-template-columns: repeat(auto-fill, 1fr) 这样的东西，在 IE 中是不可能实现的；
网格单元间隙（grid-row-gap、grid-column-gap、grid-gap CSS 属性）。可以使用额外的网格轨迹来伪造间隙；
自动生成的曲目（grid-auto-columns、grid-auto-rows CSS 属性）；
命名的网格区域（grid-area、grid-template-areas CSS 属性）。

您只需要忘记 IE 的这种可能性。

还有一些受支持的 IE 属性值不受支持

自动放置

在 IE 实现中没有自动放置行为。这意味着您必须定位所有内容，而不是使用网格的自动放置功能。

如果您不定位项目，它们将堆叠在网格的第一个单元格中。这意味着您必须为每个网格项目明确设置一个位置，否则它将驻留在第一个单元格中。如果你有这样的标记：

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

你会在 IE 中看到这样的东西

因此，在为 IE 开发 CSS Grid 时，基本上您有两种选择（方法）（如果您知道您的案例中的布局可以转换）：

为 IE 浏览器和其他浏览器生成不同的标记。在这种情况下，您不关心标记相似性（顺便说一下，grid-template-rows: repeat(150px, 50px) 的值无效，所以我假设您想要grid-template-rows: 150px 50px）。为您的案例演示

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px 50px;
  grid-gap: 1vw;
  
  display: -ms-grid;
  /* also faking 1vw grid-gap */
  -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  /* also faking 1vw grid-gap */
  -ms-grid-rows: 150px 1vw 50px;
}

.grid-item {
  /* style just for demo */
  background-color: yellow;
}

/* Explicit placement for IE */
/* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
.grid-item:nth-child(2) {
  -ms-grid-column: 3;
}

.grid-item:nth-child(3) {
  -ms-grid-column: 5;
}

.grid-item:nth-child(4) {
  -ms-grid-column: 7;
}

.grid-item:nth-child(5) {
  -ms-grid-row: 3;
}

.grid-item:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.grid-item:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.grid-item:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}

<div class="container">
  <div class="grid-item">1,1</div>
  <div class="grid-item">1,2</div>
  <div class="grid-item">1,3</div>
  <div class="grid-item">1,4</div>
  <div class="grid-item">2,1</div>
  <div class="grid-item">2,2</div>
  <div class="grid-item">2,3</div>
  <div class="grid-item">2,4</div>
</div>

为 IE 浏览器生成非常相似的标记。在这种情况下，所有浏览器的标记看起来都非常相似。这可能更易于维护，因为您不应该关心不同的方法。您的案例演示：

.container {
  display: -ms-grid;
  display: grid;
  /* also faking 1vw grid-gap */
  -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  /* also faking 1vw grid-gap */
  -ms-grid-rows: 150px 1vw 50px;
  grid-template-rows: 150px 1vw 50px;
}

.grid-item {
  /* style just for demo */
  background-color: yellow;
}

.grid-item:nth-child(2) {
  -ms-grid-column: 3;
  grid-column: 3;
}

.grid-item:nth-child(3) {
  -ms-grid-column: 5;
  grid-column: 5;
}

.grid-item:nth-child(4) {
  -ms-grid-column: 7;
  grid-column: 7;
}

.grid-item:nth-child(5) {
  -ms-grid-row: 3;
  grid-row: 3;
}

.grid-item:nth-child(6) {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 3;
  grid-column: 3;
}

.grid-item:nth-child(7) {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 5;
  grid-column: 5;
}

.grid-item:nth-child(8) {
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 7;
  grid-column: 7;
}

<div class="container">
  <div class="grid-item">1,1</div>
  <div class="grid-item">1,2</div>
  <div class="grid-item">1,3</div>
  <div class="grid-item">1,4</div>
  <div class="grid-item">2,1</div>
  <div class="grid-item">2,2</div>
  <div class="grid-item">2,3</div>
  <div class="grid-item">2,4</div>
</div>

【讨论】：

您可以在此处受益于 nth-child(xn+ y) 语法：.grid-item:nth-child(4n+2){ -ms-grid-column: 3;}、.grid-item:nth-child(4n+3){ -ms-grid-column: 5;}、.grid-item:nth-child(4n+4){ -ms-grid-column: 5;}。您也可以将它用于行：.grid-item:nth-child(n+5){-ms-grid-row:3;}、.grid-item:nth-child(n+9){-ms-grid-row:5;} 等等（n+5 表示第五个及以下）。在这里看到：nthmaster.com

【解决方案3】：

您的display 规则需要正确构建。你拥有的东西是无效的。

display: grid -ms-grid;

另外，您的 grid-template-rows 规则无效。第一个参数应该是指定重复次数的整数。

grid-template-rows: repeat(150px, 50px);

另外，我不相信repeat() 符号存在于older specs 中。貌似是current spec中引入的，所以IE不支持。

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

最后，最好将官方 (W3C) 属性放在前缀版本之后，以便它们在级联中具有优先级 (more details)。

试试这个：

.container {
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}

【讨论】：

不错的答案，带有指向 W3C 的链接。但是-ms-grid-gap/grid-gap 不适用于 IE/Edge，而且从来没有。

【解决方案4】：

Vadim 的回答几乎是你应该做的。但是还有一些 CSS 技巧可以用来减轻痛苦。

0。请务必阅读这篇博文来决定是否要为支持 IE 的网站使用网格：https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

如果您对上一个问题的回答是“是”，请继续阅读：

使用自动前缀。它将一些 CSS-grid 属性替换为它们的 IE 等效项。但考虑到网格属性的复杂程度（重复次数、最小最大值、跨度等），自动前缀无法涵盖所有情况。

当您想编写符合规范的 CSS 但仍支持 IE 时，一个非常值得信赖的伴侣是 @supports() at-rule。我用它来使用grid-gaps等更高级的网格属性：

.card-list {
  grid-row: 4;
  grid-column: 1 / 3;
  padding: 1.5vh 1vh;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.card {
  margin-bottom: 1vh;
}
.card:nth-of-type(odd) {  /* takes care of IE */
  margin-right: 1vh;
  grid-column: 1;
}
.card:nth-of-type(even) {
  grid-column: 2;
}

@supports(grid-gap: 1vh) { /* still using standard code! */
  .card-list {
    grid-gap: 1vh;
  }
  .card {
    margin-right: 0;
    margin-bottom: 0;
  }
}

【讨论】：