html - IE 11 中的 CSS 网格问题

Question

我用 HTML/CSS 创建了一个砖石风格的网格。为此，我使用了

显示:具有“网格行”和“网格列”的网格属性。

See attached pen.

这在 Chrome、Firefox 和 Edge 中运行良好，尚未在 Safari 上尝试过，但不幸的是，在 IE 11 浏览器中呈现时存在问题。它并没有获得随附笔中所示的漂亮网格布局，而是仅显示 4 个 1x1 列。

是否有任何 IE 特定的属性可以分配给我的 CSS 类，以使其在所有浏览器中正确显示？

#container {
  display:inline-block;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
}
#container img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
#container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 400px 400px;
color: #000;
}

.a {
grid-column: 1;
grid-row: 1/3;
text-align:center;
color:#fff;
display:block;
position:relative;
overflow:hidden;
}

.b {
grid-column: 2 / span 2;
grid-row: 1;
color:#fff;
position:relative;
overflow:hidden;
}

.c { 
grid-column: 2;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}

.d { 
grid-column: 3;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}



.box {
border-radius: 0px;
padding: 10px;
font-size: 150%; 
display:block;
position:relative;
}

.ctr {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}
  
 .imex-btn {
  background-color: #4080fa;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 70px;
  cursor: pointer;
  font-family: "Century Gothic";
 }

.imex-btn:hover {
background-color: #000;
color: #4080fa;
}
    
    

<div class="wrapper">
  <div class="box a">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white">BOX A<h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
    </div>
  </div>
  <div class="box b">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
   <div class="ctr"><h2 class="white">BOX B</h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
   </div>
  </div>
   <div class="box c">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white" style="text-align:center">BOX C</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
    </div>
  </div>
   <div class="box d">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white" style="text-align:center">BOX D</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
    </div>
  </div>

  
</div>

Answer 1

尝试更改 CSS

网格模板列:33% 33% 33%；

到

网格模板列:1fr 1fr 1fr;