跨浏览器网格布局

Question

当我开始检查Edge上的网格布局时，显示器会出现某种问题。 Chrome会毫无问题地接受我的grid-template-columns: n n n n，其中n是我的列。

但Edge需要-ms-前缀而-ms-grid-columns对我不起作用。

这是我的代码：

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px 100px;
  border: 1px solid #888;
  width: 600px;
  height: 300px;
}

.grid div {
  margin: 5px;
  border: 1px solid #ccc;
  background: #CCF;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Answer 1

IE \ Edge使用旧语法并根据old version of grid specs工作。问题是IE \ Edge没有自动放置功能，因此除非您为每个网格项手动指定-ms-grid-column和-ms-grid-row，否则它们将堆叠在第一个单元格中，如您所见在你的截图中

为了解决这个问题，我将为每个网格项指定行和列。我省略了-ms-grid-row: 1和-ms-grid-column: 1，因为它是默认值。演示：

＆＃13;

＆＃13;

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 200px 200px;
  grid-template-columns: 200px 200px 200px;
  -ms-grid-rows: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  border: 1px solid #888;
  width: 600px;
  height: 300px;
}

.grid div {
  margin: 5px;
  border: 1px solid #ccc;
  background: #CCF;
}

.grid > :nth-child(2) {
  -ms-grid-column: 2;
}

.grid > :nth-child(3) {
  -ms-grid-column: 3;
}

.grid > :nth-child(4) {
  -ms-grid-row: 2;
}

.grid > :nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.grid > :nth-child(6) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

.grid > :nth-child(7) {
  -ms-grid-row: 3;
}

＆＃13;

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

＆＃13;

＆＃13;

＆＃13;