如何使此简单的CSS网格布局在IE11中工作 [英] How to make this simple css-grid layout work in IE11
问题描述
我正在为一个简单的三面板滑动物体构建原型.在第二个面板上,我想使用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 prop,并且不要使用单个grid-template-columns/rows语句(这是最后一件事,因为否则autoprefixer不会编写单元格的-ms-grid-行/列道具):
.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;
}
I'm building a prototype for a simple 3-panels slide thing. On the second panel, I'd like to use css-grid to have a simple way to divide the panel into 4 equal and responsive areas, 100% container's height.
Here's the demo:
http://jsfiddle.net/stratboy/obnkc2x5/1/
Some of the code:
<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>
And the relevant css:
.sub-grid-container{
display:grid;
height: 100%;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
background-color: red;
}
NOTE: I'm also using Autoprefixer, and it's compiling things like this:
.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; }
All the code works everywhere except IE11. In IE11 I've got the 4 grid cells overlapped, and the container is mnot 100% height, nor 100% width.
I'm quite new to css grid, but I think I'm doing something really basic.. What I'm doing wrong? Or, maybe is it impossible doing it with IE11?
Ok, I managed to this, and it's working, along with the help of autoprefixer. Basically, on IE11 you must tell where the cells start and end with the grid-row
and grid-column
props. Also, to make the whole thing work with Autoprefixer, you must add grid-template prop and do not use single grid-template-columns/rows statements (this last thing is because otherwise autoprefixer won't write the cell's -ms-grid-row/column props):
.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;
}
The autoprefixed result will be something like this:
.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;
}
这篇关于如何使此简单的CSS网格布局在IE11中工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!