如何解决在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 举报,一经查实,本站将立刻删除。