grid-auto-columns在Firefox中无法完全正常运行

Question

我不明白为什么DIV 3与DIV 1 + DIV 2的大小不同。
https://codepen.io/anon/pen/vaVqPW

.grid {
  display: grid;
  grid-auto-columns: 1fr 1fr; /* I also tried 50% 50% */
  grid-gap: 20px;
}

Firefox 61应该根据caniuse支持CSS网格 https://caniuse.com/#feat=css-grid

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-auto-columns: 1fr 1fr;
  grid-gap: 20px;
}

.content {
  grid-column: 1;
  background: red;
}

.sidebar {
  grid-column: 2;
  background: blue;
}

.grid>* {
  /*border: 1px dashed red; */
  /* demo only */
}

.box {
  width: 50%;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  float: left;
}

.box100 {
  width: 100%;
  height: 75px;
  color: #fff;
  padding: 20px;
}

.box.arrow-left:after {
  content: " ";
  position: absolute;
  left: -15px;
  margin-top: -15px;
  top: 50%;
  border-top: 15px solid transparent;
  border-right: 15px solid black;
  border-left: none;
  border-bottom: 15px solid transparent;
}

<div class="grid">

  <div class="content">

    <div class="box" style="background:gray">
      DIV 1 (50% of column 1)
    </div>

    <div class="box arrow-left">
      DIV 2 (50% of column 1)
    </div>

  </div>

  <div class="sidebar">
    <div class="box100">DIV 3 (100% of column 2)</div>
  </div>

</div>



<div>

  <div class="content" style="background:tomato">
    <p>content 4 (100% of column 1 + GAP + 100% of column 2 )</p>
  </div>

</div>

Answer 1

Firefox确实支持CSS网格（请参阅caniuse.com）。

问题是Firefox在grid-auto-columns中似乎不支持多个值。

这是您在Chrome中的代码。没问题。

这是您在Firefox中的代码。有问题该代码无效/无法识别。

它在Firefox中也失败：

每个spec definition的grid-auto-columns属性可以采用多个值。但是，Firefox似乎不支持此设置。它只接受一个值。

您对问题的更正（如your answer中所述，并在下面复制），只需将隐式列（grid-auto-columns）切换为显式列（grid-template-columns）。

grid: auto-flow dense / 1fr 1fr;

grid属性是一种简写属性，使您可以在单个声明中设置所有显式和隐式规则。您上面的规则分解为：

因此，最后似乎只需要从grid-auto-columns到grid-template-columns的简单切换即可。

Answer 2

grid: auto-flow dense / 1fr 1fr;

这似乎解决了问题！

同时删除该行：

grid-auto-columns: 1fr 1fr;

笔已更新：https://codepen.io/anon/pen/vaVqPW