Question

我的设计师坚持要为我们的下一个产品实现CSS Grid。我的观点是，由于大多数客户使用IE10 / 11，我仍然必须为所有css-grid属性编写后备。

如果我仍然必须编写所有后备代码，那么使用CSS Grid有什么好处吗？如果是这样，什么？

Answer 1

Grid的原始实现发生在IE 10中，但是它的工作方式略有不同，并且没有包括它今天所具有的所有功能。因此，根据您的实际操作，可能可以在CSS规则中添加ms前缀。

或者您可以考虑逐步增强。即如果网格不可用，则返回浮点数。 MDN在here上有一篇不错的文章。

或者如果您的大多数或足够多的用户来自不完全支持网格的旧版浏览器，则根本不使用网格。

如果需要编写后备功能，就可能有好处，如果您对网格不做任何事情，而浮动却做得不好，几乎没有好处。

Answer 2

我认为这取决于您打算做什么。您将无法做CSS Grid在现代浏览器上可以做的一些更奇妙的事情，例如在repeat（repeat() - MDN web docs）上使用grid-template-columns函数。如果最终这样做，则需要完全重新创建布局，以作为IE浏览器的后备。如果您可以限制自己只使用带有-ms-前缀的IE支持的属性，那么您可能根本不需要后备。

在确定是否在支持IE10 / 11的最新项目中使用CSS网格时，我发现以下资源非常有用：

最近我遇到了这样一种情况，即CSS Grid似乎是构建我要创建的奇怪网格布局的最佳方法。

我能够使用-ms-前缀在IE10中使用我的布局，因此对我来说很有效（我也遇到了以下示例中出现的Safari网格问题，但我能够解决那个）

此处在Codepen上：https://codepen.io/katrina-isabelle/pen/MxzQNR

.grid-wrapper {
  position: relative;
  padding-bottom: 60%;
}

.grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 2px;
  -ms-grid-columns: 29% 21% 21% 29%;
  grid-template-columns: 29% 21% 21% 29%;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid-item {
  width: 100%;
  color: #ccc;
  background: #ccc;
}
.grid-item--1 {
  grid-column: 1;
  grid-row: span 2;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.grid-item--2 {
  grid-column: 2;
  grid-row: span 3;
  -ms-grid-column: 2;
  -ms-grid-row-span: 3;
}
.grid-item--3 {
  grid-column: 3;
  grid-row: span 2;
  -ms-grid-column: 3;
  -ms-grid-row-span: 2;
}
.grid-item--4 {
  grid-column: 4;
  grid-row: span 3;
  -ms-grid-column: 4;
  -ms-grid-row-span: 3;
}
.grid-item--5 {
  grid-row: span 2;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.grid-item--6 {
  grid-row: span 3;
  -ms-grid-column: 2;
  -ms-grid-row-span: 3;
}
.grid-item--7 {
  grid-row: span 2;
  -ms-grid-column: 3;
  -ms-grid-row-span: 2;
}
.grid-item--8 {
  grid-row: span 2;
  -ms-grid-column: 4;
  -ms-grid-row-span: 2;
}
.grid-item--9 {
  -ms-grid-column: 1;
  -ms-grid-row-span: 1;
}

<div class="grid-wrapper">
  <div class="grid">
    <div class="grid-item grid-item--1">
      Grid item
    </div>
    <div class="grid-item grid-item--2">
      Grid item
    </div>
    <div class="grid-item grid-item--3">
      Grid item
    </div>
    <div class="grid-item grid-item--4">
      Grid item
    </div>
    <div class="grid-item grid-item--5">
      Grid item
    </div>
    <div class="grid-item grid-item--6">
      Grid item
    </div>
    <div class="grid-item grid-item--7">
      Grid item
    </div>
    <div class="grid-item grid-item--8">
      Grid item
    </div>
    <div class="grid-item grid-item--9">
      Grid item
    </div>
  </div>
</div>

用于生产的CSS网格？

2 个答案: