我在网格中使用以下HTML标记。
var Hello = React.createClass({
render: function() {
return (
<div className="divClass">
<img src={this.props.url} alt={`${this.props.title}'s picture`} className="img-responsive" />
<span>Hello {this.props.name}</span>
</div>
);
}
});
SCSS代码如下所示：
<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>
由于我在我的工作流程中使用自动前缀，因此它会自动添加.grid {
display: grid;
grid-template-columns: repeat( 4, 1fr );
grid-gap: 30px;
align-items: start;
.grid-item {
&.height-2x {
grid-row: span 2;
}
&.width-2x {
grid-column: span 2;
}
}
}
前缀的所有相关属性。我可以通过检查元素确认。
现在，问题是此代码在Chrome，Firefox和Opera中运行良好，但是当我在Microsoft Edge或IE 11中打开此页面时，所有网格项在第一个单元格处相互重叠。根据{{3}}，这些浏览器支持带有-ms前缀的CSS网格布局。我为这种情况创建了一个CodePen。
为什么不起作用？
-ms.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: (270px)[4];
grid-template-rows: repeat(4, 270px);
grid-gap: 30px;
}
.grid .grid-item {
background-color: #000;
color: #fff;
text-align: center;
line-height: 270px;
}
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}
答案 0 :(得分：82)
Edge和IE11使用older version of the Grid specification。
<强>更新
您的代码存在的问题是您使用的是旧网格规范中不存在的属性。使用前缀没有区别。
以下是我看到的三个问题。
repeat() 旧规范中不存在repeat()表示法，因此IE11不支持它。您需要为这些浏览器写入所有行和列长度。
而不是：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: repeat( 4, 1fr );
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: repeat( 4, 270px );
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}
使用：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr; /* adjusted */
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: 270px 270px 270px 270px; /* adjusted */
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}
较旧规格参考： https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows
span 旧规范中不存在span关键字，因此IE11不支持该关键字。您必须使用这些浏览器的等效属性。
而不是：
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}
使用：
.grid .grid-item.height-2x {
-ms-grid-row-span: 2; /* adjusted */
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column-span: 2; /* adjusted */
grid-column: span 2;
}
较旧规格参考： https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span
grid-gap grid-gap属性及其长手形式grid-column-gap和grid-row-gap在旧规范中不存在，因此IE11不支持它们。你必须找到另一种方法来分开盒子。我没有读过整个旧规范，所以可能有一种方法。否则，请尝试边距。
答案 1 :(得分：13)
Faisal Khurshid和Michael_B已经给出了答案 这只是试图使可能的解决方案更加明显。
对于IE11及以下版本，您需要在父div中启用网格的旧规范，例如身体或像这样的“网格”如此：
.grid-parent{display:-ms-grid;}
然后定义列和行的数量和宽度，例如这样：
.grid-parent{
-ms-grid-columns: 1fr 3fr;
-ms-grid-rows: 4fr;
}
最后，您需要明确告诉浏览器您的元素（项目）应放在哪里，例如像这样：
.grid-item-1{
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-item-2{
-ms-grid-column: 2;
-ms-grid-row: 1;
}
答案 2 :(得分：8)
迈克尔给出了一个非常全面的答案，但我想指出一些您仍然可以做的事情，以便能够以几乎轻松的方式在IE中使用网格。
repeat功能您仍然可以使用重复功能，它只是隐藏在其他语法后面。不必编写repeat(4, 1fr)，而必须编写(1fr)[4]。而已。
有关当前状态，请参阅以下系列文章：https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
除IE之外的所有浏览器均支持网格间距。因此，您可以使用@supports规则为所有新浏览器有条件地设置网格间隙：
示例：
.grid {
display: grid;
}
.item {
margin-right: 1rem;
margin-bottom: 1rem;
}
@supports (grid-gap: 1rem) {
.grid {
grid-gap: 1rem;
}
.item {
margin-right: 0;
margin-bottom: 0;
}
}
这有点冗长，但从好的方面来说，您不必为了支持IE而完全放弃网格。
我不能太强调-只需在构建步骤中使用autoprefixer即可解决网格的一半痛苦。以符合标准的方式编写CSS，然后让autoprefixer来完成自动转换所有旧规范属性的工作。当您决定不想支持IE时，只需在browserlist配置中更改一行，就可以从构建文件中删除所有IE专用代码。
答案 3 :(得分：0)
为支持自动布局的IE11，每次仅在 1维中使用网格布局时，我都会将grid转换为table布局。我还使用了margin而不是grid-gap。
结果是相同的，请点击此处https://jsfiddle.net/hp95z6v1/3/