grid-auto-columns 在 Firefox 中不能完全工作答案

【问题标题】：grid-auto-columns does not completely work in Firefoxgrid-auto-columns 在 Firefox 中不能完全工作
【发布时间】：2018-08-08 12:58:33
【问题描述】：

我不明白为什么 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>

【问题讨论】：

可以发截图吗？它们在您的笔中以相同的宽度和高度显示。
你是对的：在 Chrome 67 中它们是，在 FF61 中它们不是。

标签： css firefox grid css-grid

【解决方案1】：

Firefox 确实支持 CSS Grid（参见 caniuse.com）。

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

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

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

这里的 Firefox 也失败了：

根据spec definition，grid-auto-columns 属性可以采用多个值。但是，Firefox 似乎缺乏对这种设置的支持。它只接受一个值。

您对问题的更正，如your answer 中所述并复制如下，只是从隐式列（grid-auto-columns）切换到显式列（@ 987654336@).

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

grid 属性是一个速记属性，允许您在单个声明中设置所有显式和隐式规则。您上面的规则分解为：

所以最后，您似乎只需要从grid-auto-columns 到grid-template-columns 的简单切换。

【讨论】：

【解决方案2】：

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

这似乎解决了问题！

同时删除该行：

grid-auto-columns: 1fr 1fr;

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

【讨论】：