FirefoxとChromeでのCSSグリッドの正しい実装

Question

結論として、hereとして、CSS Gridはgrid-auto-rows: 1frを使用して行間で等しい高さの要素を実装します。ただし、高さが同じ行の間に高さがautoに設定された行を挿入すると、ChromeとFirefoxの動作が異なることがあります。つまり、明示的なgrid-auto-rows: auto 1fr 1fr 1fr構文を使用しているが、grid-auto-rows: auto repeat(3, 1fr);のようなrepeatのような行を使用すると、行ごとに同じ高さしかなく、行間で同じ高さを達成することができます。

のFirefoxとChromeの両方で、次のことに注意してください。

https://codepen.io/Hlsg/pen/eemRmm

https://codepen.io/Hlsg/pen/jGWQwM

興味深いことに、彼らの両方が、この実装で同じように動作するので、私はこれはと行うことが多いと思っていますcss repeatの彼らの実装：

https://codepen.io/Hlsg/pen/VWKPzq

あなたはこれをどのように扱いますか、どのブラウザに正しい標準があると思いますか？

Answer 1

興味深いことに、両方ともこの実装では同じように動作するため、これはCSS repeatの実装と関連があると考えています。

あなたは正しいと思います。

grid-auto-rowsとgrid-auto-columnsの仕様定義を見ると、repeat()表記は許容値ではないようです。

定義によれば、トラックサイズのみが許容値です。また、「トラックサイズ」の定義にはrepeat()は含まれません。

したがって、仕様の違反または不明瞭な仕様言語の違反により、ブラウザの実装が異なる可能性があります。

https://www.w3.org/TR/css3-grid-layout/#auto-tracks