CSS:显示:网格和/或-ms-grid

Is there a way to use both or either display: grid/-ms-grid into one style sheet or do I have to use an HTML hack or JavaScript to query what type of browser a page is being viewed with grid layout?

是否有一种方法可以同时使用或显示:grid/-ms-grid到一个样式表中，还是必须使用HTML hack或JavaScript来查询使用网格布局查看页面的浏览器类型?

Example:

例子:

The following styling doesn't seem to work

下面的样式似乎不能工作

.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;
}

3 个解决方案

#1

Transforming new CSS Grid layout syntax to outdated IE's/Edge's is really a challenge. It's not just the matter of adding some vendor prefixes.

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

IE/Edge has very limited support of what is present in new version of CSS Grid Layout. There is no IE/Edge support of

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

• auto-placement and selecting its flow (grid-auto-flow CSS property);
• 自动放置并选择它的流(grid-auto-flow CSS属性);
• repeated columns/rows (repeat function and some special values like auto-fill and auto-fit). In some cases this mean that you'll just have to replace with explicit values, like in your case, you can replace grid-template-columns: repeat(4, 1fr) with -ms-grid-columns: 1fr 1fr 1fr 1fr and this will work perfectly. But if you have something like grid-template-columns: repeat(auto-fill, 1fr) it's impossible to implement this in IE/Edge;
• 重复的列/行(重复函数和一些特殊值，如自动填充和自动填充)。在某些情况下，这意味着您只需要用显式值替换，就像在您的例子中，您可以用-ms-grid列:1fr 1fr 1fr 1fr, 1fr 1fr, 1fr，来替换grid列:repeat(4,1fr)但是，如果您有类似grid-template-columns的东西:重复(自动填充，1fr)，在IE/Edge中不可能实现它;
• grid cell gaps (grid-row-gap, grid-column-gap, grid-gap CSS properties). Gaps can be faked using additional grid tracks;
• 网格单元间隔(网格-行-间隔、网格-列-间隔、网格-间隔CSS属性)。可以使用附加的网格轨迹来伪造间隙;
• automatically generated tracks (grid-auto-columns, grid-auto-rows CSS properties);
• 自动生成轨迹(网格-自动列、网格-自动行CSS属性);
• named grid areas (grid-area, grid-template-areas CSS properties).
• 命名网格区域(网格区域、网格-模板-区域CSS属性)。

You just have to forget about this possibilities for IE.

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

Also some values of supported IE properties are not supported

还不支持一些支持的IE属性的值。

Autoplacement

There is no auto-placement behaviour in IE/Edge implementation. This means that you have to position everything rather than use the auto-placement ability of grid.

在IE/Edge实现中没有自动放置行为。这意味着你必须把所有东西都定位，而不是使用网格的自动放置能力。

If you don’t position items they will stack up in the first cell of the grid. That means that you have to set position explicitly for every single grid item or it will reside in first cell. If you have markup like this:

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

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

You'll see something this in IE/Edge

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

---

So basically you have two options (methodologies) when developing CSS Grid for IE/Edge (if you know that layout in your case can be transformed):

因此，在为IE/Edge开发CSS网格时，基本上你有两个选项(方法学)(如果你知道你的布局可以被转换的话):

• Generate different markup for IE/Edge browser and other browsers. In this case you don't care about markup similarity (by the way your value of grid-template-rows: repeat(150px, 50px) is invalid, so I assume you wanted grid-template-rows: 150px 50px). Demo for you case

  为IE/Edge浏览器和其他浏览器生成不同的标记。在这种情况下，您不关心标记相似度(顺便说一下，您的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/Edge */
  /* 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>

• Generate very similar markup for IE/Edge browsers. In this case markup for all browsers will look very similar. This might be more maintainable because you shouldn't care about different approaches. Demo for you case:

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

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

#2

Your display rule needs to be structured correctly. What you have is invalid.

您的显示规则需要被正确地结构化。你所拥有的是无效的。

display: grid -ms-grid;

Also, your grid-template-rows rule is invalid. The first argument is supposed to be an integer that specifies the number of repetitions.

而且，您的网格模板行规则无效。第一个参数应该是指定重复次数的整数。

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

Also, I don't believe the repeat() notation existed in the older specs. It looks like it was introduced in the current spec, so IE wouldn't support it.

而且，我不相信旧规格中存在重复()标记。看起来它是在当前规范中引入的，所以IE不支持它。

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

Lastly, it's best to put the official (W3C) properties after the prefixed versions so they are given priority in the cascade (more details).

最后，最好将官方(W3C)属性放在前缀版本之后，以便在级联中优先考虑它们(更多细节)。

Try this:

试试这个:

.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;
}

#3

The answer by Vadim is pretty much what you should do. But there are a few more CSS tricks you can use to ease your pain.

Vadim的回答基本上就是你应该做的。但是还有一些CSS技巧可以帮助你减轻痛苦。

0. Be sure to read this blog post to decide whether you want to use grids for websites which support IE: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

0。请务必阅读这篇博客文章，以决定您是否希望在支持https://rachelandrew.co.uk/archives6/11/26 /should-i- trto -use- to-use- to- user -implementation of css-grid-layout/的网站上使用网格

If your answer to the previous question is "Yes", read on:

如果你对前一个问题的回答是“是”，请继续阅读:

1. Use autoprefixer. It will replace some of the CSS-grid properties to their IE equivalent. But given how complex the grid properties can be (repeats, minmax, spans, etc), autoprefixer can't cover all cases.
2. 使用autoprefixer。它将把CSS-grid的一些属性替换为IE的等价属性。但是考虑到网格属性的复杂性(repeat, minmax, span等)，autoprefixer不能覆盖所有的情况。

3. A very trusty companion in cases when you want to write spec-compliant CSS, but still support IE is the @supports() at-rule. I use it to use the more advanced grid properties such as grid-gaps, etc:

   如果您希望编写符合规范的CSS，但仍然支持IE，则可以使用@supports()规则。我使用它来使用更高级的网格属性，如网格间隔等:

   .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;
     }
   }