我不明白为什么 DIV 3 的大小与 DIV 1 + DIV 2 的大小不同。
https://codepen.io/anon/pen/vaVqPW https://codepen.io/anon/pen/vaVqPW
.grid {
display: grid;
grid-auto-columns: 1fr 1fr; /* I also tried 50% 50% */
grid-gap: 20px;
}
根据 caniuse 的说法，Firefox 61 应该支持 css gridhttps://caniuse.com/#feat=css-grid 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>
Firefox 确实支持 CSS 网格（请参阅caniuse.com https://caniuse.com/#search=grid).
问题是 Firefox 似乎不支持多个值grid-auto-columns.
这是您在 Chrome 中的代码。没问题。
这是您在 Firefox 中的代码。有问题。该代码无效/无法识别。
在 Firefox 中也失败了：
The grid-auto-columns属性可以采用多个值，根据规格定义 https://www.w3.org/TR/css3-grid-layout/#auto-tracks。然而，Firefox 似乎缺乏对此设置的支持。它只接受单个值。
您对问题的更正，如中所述您的答案 https://stackoverflow.com/a/51749687/3597276下面复制的，只是简单地切换隐式列 (grid-auto-columns) to 显式列 (grid-template-columns).
grid: auto-flow dense / 1fr 1fr;
The grid https://www.w3.org/TR/css3-grid-layout/#grid-shorthandproperty 是一个简写属性，允许您在单个声明中设置所有显式和隐式规则。您的上述规则可以细分为：
所以最后看来，一个简单的切换grid-auto-columns to grid-template-columns就是你所需要的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
