grid-auto-columns does not completely work in Fire

问题:

I don't understand why DIV 3 is not the same size as 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 should support css grid according to caniuse 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>

回答1:

Firefox does indeed support CSS Grid (see caniuse.com).

The problem is that Firefox does not appear to support multiple values in grid-auto-columns.

This is your code in Chrome. No problems.

This is your code in Firefox. There's a problem. The code is invalid / not recognized.

It fails in Firefox here, too:

The grid-auto-columns property can take multiple values, per the spec definition. However, Firefox appears to lack support for this set-up. It only accepts a single value.

Your correction to the problem, as stated in your answer and copied below, is simply to switch from implicit columns (grid-auto-columns) to explicit columns (grid-template-columns).

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

The grid property is a shorthand property that allows you to set all explicit and implicit rules in a single declaration. Your rule above breaks down to this:

So in the end, it appears that a simple switch from grid-auto-columns to grid-template-columns was all you needed.

回答2:

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

this seems to solve the Problem!

At the same time deleting the line:

grid-auto-columns: 1fr 1fr;

Pen is updated: https://codepen.io/anon/pen/vaVqPW