CSS: 显示: 网格 and/or -ms-grid

Question

有没有一种方法可以将两者或 display: grid/-ms-grid 用于一种样式 sheet 或者我是否必须使用 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;
}

Answer 1

您的 display 规则需要正确构建。你的无效。

display: grid -ms-grid;

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

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

此外，我不相信 repeat() 符号存在于 older specs. It looks like it was introduced in the 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;
}

Answer 2

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

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

没有IE支持

自动放置并选择其流(grid-auto-flow CSS 属性);
重复 columns/rows（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 网格时，基本上您有两种选择（方法）（如果您知道您的案例中的布局可以转换）：

为 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>

Answer 3

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

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

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

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

当您想编写符合规范的 CSS，但仍支持 IE 时，这是一个非常值得信赖的伙伴是 @supports() 规则。我用它来使用更高级的网格属性，例如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;
  }
}

Answer 4

这是我用的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>

CSS: 显示: 网格 and/or -ms-grid

CSS: display: grid and/or -ms-grid

css

internet-explorer

grid-layout

css-grid

自动放置