logo标签列表

CSS网格 强制列数为奇数

cssfirefoxcss-grid
5
我希望创建一个响应式网格，在窗口大小增加时添加额外的列，但总列数始终为奇数。
我已经找到了在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
2
这是一个已知的FireFox Bug，在grid bugs上有记录，但没有提供解决方法。官方在bugzilla上的Firefox bug在这里：https://bugzilla.mozilla.org/show_bug.cgi?id=1341507 - Danield
感谢 @Danield。 - andybarefoot
1个回答
2
这是一个已知的 Firefox bug，在grid bugs中有记录，没有建议的解决方法。
  1. 重复符号应该接受曲目列表

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>
<!--
https://unsplash.com/collections/724/
146130
-->

Codepen演示

话虽如此，解决方法可以是编写仅适用于Firefox的CSS，利用媒体查询设置grid-template-columns属性，并以一种确保列数为奇数的方式设置固定列宽。

我没有改动标记，并添加了仅针对Firefox的CSS - 使用这种方法。

1）包装仅适用于Firefox的其他CSS

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

因为我们知道这些图片要以3、5、7列的方式显示，而且每张图片的最小宽度为150像素 - 我们可以生成媒体查询来创建这些列的布局。
.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));
    }
  }

等等……

谢谢！我已将其用于此 CodePen：https://codepen.io/andybarefoot/pen/ypPgod?editors=0100 - andybarefoot
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接