Microsoft Edge 中不考虑网格模板区域

Question

在 Edge 上，当某些区域为空时，内容不符合定义的区域。我要如果只有一个offer，不超过1/4

适用于 Chrome/FF

我有：

grid-template-areas: "offer offer offer offer";
grid-auto-columns: 1fr;
grid-gap: 1rem;

See the CodePen Chrome/FF 和 Edge

.container {
  display: grid;
  grid-template-areas: "offer offer offer offer";
  grid-gap: 7px;
}

.offer {
  border: 1px solid #000;
  min-height: 200px;
}

<div class="container">
  <div class="offer">Offer 1</div>
  <div class="offer">Offer 2</div>
  <div class="offer">Offer 3</div>
</div>

Answer 1

我已经重现了你的问题。要修复它，您应该将此错误提交给 MS issue tracker.

但是如果您正在寻找解决方法，您可以使用 grid-template-columns 显式设置网格列的宽度，在当前情况下为 grid-template-columns: repeat(4, 1fr)。演示：

.container {
  display: grid;
  grid-template-areas: "offer offer offer offer";
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 7px;
}

.offer {
  border: 1px solid #000;
  min-height: 200px;
}

<div class="container">
  <div class="offer">Offer 1</div>
  <div class="offer">Offer 2</div>
  <div class="offer">Offer 3</div>
</div>

Microsoft Edge 中不考虑网格模板区域

Grid template area not respected in Microsoft Edge

css

css-grid

microsoft-edge