为什么我的CSS网格不能在Chrome中使用(在所有其他浏览器中都可以使用) [英] Why is my css grid not working in Chrome (works in all other browsers)

问题描述

我已经设置了一个3列的CSS网格来显示我们的投资组合.我找到了适用于Firefox和Internet Explorer和Safari的代码.但是在Chrome上它根本不显示我的网格，所有图片都在彼此下方.请访问以下网站: http://www.ddw-sanitair.be

I've setup a css grid with 3 columns to display our portfolio. I found a working code for Firefox and Internet Explorer and Safari. However on Chrome it doesn't show my grid at all, all the pictures are below each other. See the website: http://www.ddw-sanitair.be

此外，它在某些图片上不接受'display:none'类，因此是双重/三重图像...

Additionally it does not accept the 'display: none' class on some of the pictures, hence the double/triple images ...

有什么建议吗?

我试图添加grid-auto-rows:270px;如另一个线程中所建议.我尝试添加grid-template-rows:repeat(3，1fr);如另一个主题中所建议.

I tried to add grid-auto-rows: 270px; as suggested in another thread. I tried adding grid-template-rows: repeat(3, 1fr); as suggested in another thread.

但这并没有改变Chrome中的任何内容...

But this didn't change anything in Chrome ...

.portfolio-group {
    position: relative;
    display:grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 270px;

预期结果=一个漂亮的反应性网格，具有3列3行(在浏览器视图中).

Expected result = a nice reactive grid with 3 columns and 3 rows (in browser view).

推荐答案

我希望您能从以下站点获得答案:`

i hope you will get the ans from this site: `https://rachelandrew.co.uk/archives/2014/06/27/css-grid-layout-getting-to-grips-with-the-chrome-implementation/

这篇关于为什么我的CSS网格不能在Chrome中使用(在所有其他浏览器中都可以使用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！