Microsoft Edge中未遵循网格模板区域

Question

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

适用于Chrome / FF

我有：

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

Chrome / FF和Edge上的

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

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

但如果您正在寻找解决方法，可以设置网格列＆＃39;宽度明确使用grid-template-columns，在当前案例grid-template-columns: repeat(4, 1fr)中。演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;