css - 有没有办法为 IE 动态创建 CSS 网格？

Question

我正在创建一个 php 网站，我从数据库中提取内容，并根据需要在我的页面输出中构建 html div。然后我使用 CSS 网格格式化页面。此过程在 Chrome、Firefox、Edge 和 Safari 中完美运行。我无法让它在 Internet Explorer 11 中正常运行。

我正在尝试将 -ms 合并到我的代码中。由于某种原因，在 Internet Explorer 中查看时，我的网格叠加在第一列的第一行中。我使用我的工作代码并通过 Autoprefixer CSS 运行它，但没有任何帮助。

HTML 示例:

<div class="main">
<div class="head">Title of grid displayed here</div>
//Inside content I build <div> based on return from db//
<div class="content">
            //the info <div> stopped at the end of the loop//
        <div id="info"></div> 
        <div id="info"></div>
        <div id="info"></div>
        <div id="info"></div>
        <div id="info"></div>
        <div id="info"></div>
</div>
</div>

CSS 示例

.main {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-columns:100%;
-ms-grid-rows: auto 20px auto;
/*All other browsers*/
display: grid;
grid-template-columns:100%;
grid-gap: 20px 20px;
margin-bottom: 5%;
grid-template-areas:
"head"
"content";
}

.head {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-row: 1;
-ms-grid-column: 1fr;
/*All other browsers*/
grid-area: head;
display: grid;
margin: 2% 0 2% 0;
text-align: center;
}

.content {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-row: 3;
-ms-grid-columns: (1fr)[3];
-ms-grid-column-span: 1;
/*All other browsers*/
 grid-area: content;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
 margin-left: 10px;
 margin-right: 10px;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
}

#info {
outline: solid #515151;
}

.info{
 grid-area: info;

}

输出在 Chrome、Firefox、Safari 甚至 Edge 中看起来都很棒。我只是无法让它在 IE 中工作。

Answer 1

我只在支持 Grid 的浏览器中使用 CSS Grid 解决了这个问题，在其他情况下我使用 Flexbox。

CSS 网格布局的 Flexbox 回退

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.grid-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 30%; /* IE11 */
  margin: 1.6%; /* IE11 */
  background: rgb(242, 248, 207);
  border: 4px dashed black;
}
/* This will only activate the Grid in browsers that support it */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    justify-content: space-between;
  }
  .grid-item {
    width: 100%;
    background: rgb(243, 242, 242);
    margin: 0;/* We will use grid-gap instead of margin */
  }
}

    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
    </div>

我认为我们可以使用媒体查询获得更好的结果，希望对您有所帮助😊。