跨浏览器网格布局

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 因为它们是默认值。演示：

.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;
}

<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>

跨浏览器网格布局

Cross-browser Grid layout

css

sass

cross-browser