根据结论here,CSS Grid使用grid-auto-rows: 1fr
跨行实现相等的高度元素。但是,当在高度相等的行之间插入高度设置为auto的行时,Chrome和Firefox会显示不同的行为。也就是说,Chrome在使用显式grid-auto-rows: auto 1fr 1fr 1fr
语法时在行之间实现了相同的高度,但在使用repeat
grid-auto-rows: auto repeat(3, 1fr);
时,每行只有相同的高度,而Firefox只能达到相同的高度行基础无论如何。
请在Firefox和Chrome中注意以下事项:
https://codepen.io/Hlsg/pen/eemRmm
https://codepen.io/Hlsg/pen/jGWQwM
有趣的是,它们在这个实现中的行为都相同,所以我认为这更多地与它们css repeat
的实现有关:
https://codepen.io/Hlsg/pen/VWKPzq
您对此有何看法,您认为哪种浏览器具有正确的标准方法?
答案 0 :(得分:1)
有趣的是,它们在这个实现中的行为都相同,所以我认为这更多地与它们的css
repeat
的实现有关。
我认为你是对的。
如果您查看grid-auto-rows
和grid-auto-columns
的规范定义,则repeat()
符号似乎不是可接受的值。
定义说只有轨道大小才是可接受的值。 “跟踪大小”的定义不包括repeat()
。
因此违反规范或至少不清楚的规范语言可能会导致不同的浏览器实现。