解决方法:(也适用于Firefox）

Question

我想创建一个响应式网格，在窗口大小增加时添加额外的列，但总列数总是奇数。

我找到了一个适用于Chrome / Opera / Safari但不适用于Firefox的解决方案：

grid-template-columns: repeat(auto-fill, minmax(150px,1fr) minmax(150px,1fr)) minmax(150px,1fr);

有关如何在Firefox中使用此功能的任何建议吗？

CodePen：https://codepen.io/andybarefoot/pen/MrOzod?editors=0100

Answer 1

这是worked example上记录的已知firefox错误，未提供解决方法。

重复记谱法应接受曲目列表

grid bugs（来自规范）如下所示：

auto-fill

第一个参数指定重复次数。第二参数是一个曲目列表，重复了这么多次。

Firefox可以在repeat函数的第二个参数中处理轨道列表，但前提是第一个参数是整数。

e.g。 repeat() syntax：auto-fit

但是，如果第一个参数是grid-template-columns: repeat(auto-fill, 200px 100px);或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)); } } } - ，那就是firefox错误。

例如：firefox can handle this：<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）

＆＃13;

grid-template-columns

＆＃13;

@-moz-document url-prefix() {
    /* firefox only code */
}

＆＃13;

firefox fails here

话虽这么说，一个解决方法可能是编写仅使用firefox的CSS，它利用媒体查询以固定的列宽设置.grid { grid-template-columns: repeat(auto-fill, calc(100vw / 3 - 5px)); } @media (min-width:750px) { /* 150 * 5 = 750 */ .grid { /* -5px to take the scrollbar into account */ grid-template-columns: repeat(auto-fill, calc(20vw - 5px)); } } @media (min-width:1050px) { /* 150 * 7 = 1050 */ .grid { grid-template-columns: repeat(auto-fill, calc(100vw / 7 - 5px)); } }属性，以便我们可以确保奇数列。

我还没有触及标记，我添加了仅针对firefox的css - 使用Codepen demo。

1）仅为firefox包装额外的CSS

POP EAX
ADD EAX, 5
PUSH EAX

2）由于我们知道图像将以3,5,7 ..列显示，每个图像的最小宽度为150px - 我们也可以生成媒体查询以创建这些列的布局。

sh$ cat test.js 
function preInc(){
  for(i=0; i < 10; ++i)
    console.log(i);
}

function postInc(){
  for(i=0; i < 10; i++)
    console.log(i);
}

// force lazy compilation
preInc();
postInc();

等...

CSS Grid Force列数为奇数

1 个答案:

解决方法:(也适用于Firefox）

firefox fails here