CSS 网格强制列数为奇数

Question

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

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

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

关于如何在 Firefox 中进行这项工作有什么建议吗？

代码笔：https://codepen.io/andybarefoot/pen/MrOzod?editors=0100

Answer 1

这是 grid bugs 上记录的一个已知的 firefox 错误，没有建议的解决方法。

Repeat notation should accept a track listing

repeat() syntax（来自规范）看起来像这样：

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second argument is a track list, which is repeated that number of times.

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 demo

话虽这么说，解决方法可能是编写 firefox-only CSS，它利用媒体查询以某种方式设置具有固定列宽的 grid-template-columns 属性我们可以确保奇数列。

我没有触及标记，我添加了仅针对 firefox 的 css - 使用 this method.

1) 为 firefox 额外包装 CSS

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

2) 因为我们知道图像将显示在 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));
    }
  }

等...

CSS 网格强制列数为奇数

CSS Grid Force number of columns to be odd

css

firefox

css-grid

解决方法：（也适用于 Firefox）

Codepen demo