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

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

* {
  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>

标签： cssfirefoxgridcss-grid

Answer 1

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

问题是 Firefox 似乎不支持grid-auto-columns.

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

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

它在 Firefox 中也失败了：

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

如您的答案中所述并复制在下面，您对问题的更正只是从隐式列( grid-auto-columns) 切换到显式列( grid-template-columns)。

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

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

所以最后，看起来你只需要grid-auto-columns一个简单的切换。grid-template-columns