我正在为一个简单的 3 面板幻灯片制作原型(prototype)。在第二个面板上,我想使用 css-grid 以一种简单的方式将面板划分为 4 个相等且响应迅速的区域,容器高度为 100%。
这是演示:
http://jsfiddle.net/stratboy/obnkc2x5/1/
部分代码:
<div class="sub-grid-container">
<div class="sub-grid-item">sub 1</div>
<div class="sub-grid-item">sub 2</div>
<div class="sub-grid-item">sub 3</div>
<div class="sub-grid-item">sub 4</div>
</div>
和相关的CSS:
.sub-grid-container{
display:grid;
height: 100%;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
background-color: red;
}
注意:我也在使用 Autoprefixer,它正在编译这样的东西:
.sub-grid-container {
display: -ms-grid;
display: grid;
height: 100%;
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
background-color: red; }
除 IE11 外,所有代码都适用。在 IE11 中,我有 4 个网格单元重叠,并且容器不是 100% 高度,也不是 100% 宽度。
我对 css 网格很陌生,但我认为我正在做一些非常基础的事情。我做错了什么?或者,也许用 IE11 不可能做到这一点?
最佳答案
好的,我设法做到了这一点,并且在自动前缀器的帮助下,它正在工作。基本上,在 IE11 上,您必须使用 grid-row
和 grid-column
属性来区分单元格的开始和结束位置。此外,为了使整个事情与 Autoprefixer 一起工作,您必须添加 grid-template 属性并且不要使用单个 grid-template-columns/rows 语句(最后一件事是因为否则 autoprefixer 将不会写入单元格的 -ms-grid-行/列 Prop ):
.sub-grid-container {
display: grid;
height: 100%;
// grid-template-columns: 50% 50%; // do not
// grid-template-rows: 50% 50%; // do not
grid-template:
"a b" 1fr
"c d" 1fr /
1fr 1fr; // you can use fr units instead %
}
.cell-1 {
grid-area: a;
}
.cell-2 {
grid-area: b;
}
.cell-3 {
grid-area: c;
}
.cell-4 {
grid-area: d;
}
自动加前缀的结果将是这样的:
.sub-grid-container {
display: -ms-grid;
display: grid;
height: 100%;
-ms-grid-rows: 1fr 1fr;
-ms-grid-columns: 1fr 1fr;
grid-template: "a b" 1fr "c d" 1fr / 1fr 1fr;
}
.cell-1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
.cell-2 {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: b;
}
.cell-3 {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: c;
}
.cell-4 {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: d;
}
关于html - 如何使这个简单的 css-grid 布局在 IE11 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53574303/