这是一个已知的 Firefox bug,在
grid bugs中有记录,没有建议的解决方法。
- 重复符号应该接受曲目列表
repeat()语法(来自规范)如下:
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
第一个参数指定重复次数。第二个参数是一个轨道列表,该列表将被重复该次数。
Firefox可以处理repeat函数的第二个参数中的轨道列表,但前提是第一个参数是整数。
例如:
firefox can handle this:
grid-template-columns: repeat(3, 200px 100px);
但是,如果第一个参数是
auto-fill
或
auto-fit
- 这是Firefox的错误。
例如:
firefox fails here:
grid-template-columns: repeat(auto-fill, 200px 100px);
解决方法:(在Firefox上也适用)
body {
background-color: #5F9E9D;
margin: 0;
}
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr) minmax(150px, 1fr)) minmax(150px, 1fr);
}
@-moz-document url-prefix() {
.grid {
grid-template-columns: repeat(auto-fill, calc(100vw / 3 - 5px));
}
@media (min-width: 750px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(20vw - 5px));
}
}
@media (min-width: 1050px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100vw / 7 - 5px));
}
}
@media (min-width: 1350px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100vw / 9 - 5px));
}
}
}
<div id="grid1" class="grid">
<div><img src='https://source.unsplash.com/random/250x250?sig=1' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=2' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=3' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=4' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=5' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=6' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=7' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=8' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=9' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=10' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=11' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=12' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=13' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=14' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=15' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=16' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=17' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=18' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=19' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=20' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=21' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=22' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=23' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=24' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=25' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=26' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=27' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=28' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=29' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=30' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=31' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=32' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=33' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=34' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=35' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=36' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=37' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=38' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=39' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=40' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=41' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=42' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=43' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=44' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=45' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=46' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=47' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=48' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=49' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=50' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=51' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=52' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=53' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=54' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=55' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=56' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=57' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=58' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=59' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=60' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=61' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=62' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=63' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=64' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=65' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=66' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=67' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=68' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=69' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=70' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=71' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=72' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=73' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=74' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=75' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=76' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=77' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=78' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=79' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=80' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=81' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=82' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=83' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=84' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=85' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=86' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=87' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=88' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=89' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=90' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=91' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=92' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=93' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=94' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=95' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=96' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=97' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=98' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=99' /></div>
<div><img src='https://source.unsplash.com/random/250x250?sig=100' /></div>
</div>
话虽如此,解决方法可以是编写仅适用于Firefox的CSS,利用媒体查询设置grid-template-columns
属性,并以一种确保列数为奇数的方式设置固定列宽。
我没有改动标记,并添加了仅针对Firefox的CSS - 使用这种方法。
1)包装仅适用于Firefox的其他CSS
@-moz-document url-prefix() {
}
因为我们知道这些图片要以3、5、7列的方式显示,而且每张图片的最小宽度为150像素 - 我们可以生成媒体查询来创建这些列的布局。
.grid {
grid-template-columns: repeat(auto-fill, calc(100vw / 3 - 5px));
}
@media (min-width:750px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(20vw - 5px));
}
}
@media (min-width:1050px) {
.grid {
grid-template-columns: repeat(auto-fill, calc(100vw / 7 - 5px));
}
}
等等……