网格模板区域在Microsoft Edge中未尊重

Question

在边缘上，当某些空为空时，内容不尊重定义的区域。我想要只有一个报价，它不会超过1/4。

在chrome/ff

上使用

我有：

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

请参阅Chrome/ff和Edge上的Codepen

.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

我已经重现了您的问题。要修复它

但是，如果您正在寻找解决方法，则可以使用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>