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

Question

提问by Mr. Bean

Is there a way to use both or either display: grid/-ms-gridinto 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?

有没有办法在display: 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;
}

Answer 1

回答by Vadim Ovchinnikov

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

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

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

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

auto-placement and selecting its flow (grid-auto-flowCSS property);
repeated columns/rows (repeatfunction and some special values like auto-filland 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 1frand 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;
grid cell gaps (grid-row-gap, grid-column-gap, grid-gapCSS properties). Gaps can be faked using additional grid tracks;
automatically generated tracks (grid-auto-columns, grid-auto-rowsCSS properties);
named grid areas (grid-area, grid-template-areasCSS properties).

自动放置并选择其流程（grid-auto-flowCSS 属性）；
重复的列/行（repeat函数和一些特殊值，如auto-filland 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-gapCSS 属性）。可以使用额外的网格轨道来伪造间隙；
自动生成的轨道（grid-auto-columns，grid-auto-rowsCSS 属性）；
命名网格区域（grid-area，grid-template-areasCSS 属性）。

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 behavior in IE implementation. This means that you have to position everything rather than use the auto-placement ability of grid.

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

If you don't position items they will stack up in the first cell of the grid. That means that you have to set a position explicitly for every single grid item or it will reside in the 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

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

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

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

Generate different markup for IE 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 your case

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

Generate very similar markup for IE 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 your case:

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

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

回答by Michael Benjamin

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

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

display: grid -ms-grid;

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

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

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.

另外，我不相信旧规范中repeat()存在该符号。看起来它是在当前规范中引入的，所以 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;
}

Answer 3

回答by kumarharsh

The answer by Vadimis 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. 请务必阅读此博客文章以决定是否要为支持 IE 的网站使用网格：https: //rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the -ie-implementation-of-css-grid-layout/

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

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

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.

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:

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

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

如果您想编写符合规范的 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;
  }
}

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

提问by Mr. Bean

回答by Vadim Ovchinnikov

Autoplacement

自动放置

回答by Michael Benjamin

回答by kumarharsh

相关推荐

最近更新

标签

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

提问by Mr. Bean

回答by Vadim Ovchinnikov

Autoplacement

自动放置

回答by Michael Benjamin

回答by kumarharsh

相关推荐

CSS IE11 中的 Flexbox 对齐

CSS 网格：使用可用空间但更大时滚动的内容

CSS 垂直对齐材质图标

CSS 引导程序 4 行高

相关推荐

最近更新

标签