在Internet Explorer中使网格布局有效

问题描述

我正在尝试在IE中使用网格布局。我认为这是一个相当简单的网格布局，它使用grid-template-columns：repeat（auto-fit，minmax（#px，1fr））以及网格行/列间隙。

我尝试了以下操作，但在IE11和IE9上不起作用。

.grid {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start; 
  margin-top: -20px;
} 

我在下面共享我的代码。

CSS代码

.grid {
  display: grid;
  justify-content: start; 
  margin-top: -20px;
}


@media (min-width: 800px) {
  .grid {
  grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
  grid-row-gap: 70px;
  grid-column-gap: 40px;
  } 
}


@media (min-width: 600px) and (max-width: 799px) {
  .grid {
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  grid-row-gap: 40px;
  grid-column-gap: 30px;
  margin-top: -15px;
  } 
}


@media (max-width: 599px) {
  .grid {
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  grid-row-gap: 40px;
  grid-column-gap: 20px;
  margin-top: 18px;
  } 
}


.grid .photo {
  width: 100%;
  background-size: contain;
  background-position: center;
}

.grid .photo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.grid a {
  display: block;
  text-decoration: none;
  color: inherit;

}

HTML代码

<div class="grid">

  <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1;"></div>
    </a>
  </article> 
  
    <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG;"></div>
    </a>
  </article> 
  
    <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1;"></div>
    </a>
  </article> 
  
      <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG;"></div>
    </a>
  </article> 
  
  </div>

非常感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）