I've configured a CSS grid with 3 columns to showcase our portfolio. I managed to find code that works for Firefox, Internet Explorer, and Safari. However, in Chrome, the grid isn't displayed properly - all the images are stacked below each other. Take a look at the website:
Furthermore, some pictures don't respond to the 'display: none' class, resulting in duplicate/triplicate images...
Any ideas on how to fix this?
I attempted to include 'grid-auto-rows: 270px;' as suggested in one discussion thread. I also tried incorporating 'grid-template-rows: repeat(3, 1fr);' from another thread.
Unfortunately, these changes didn't make any difference in Chrome...
.portfolio-group {
position: relative;
display: grid;
align-items: start;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-auto-rows: 270px;
Expected outcome = a visually appealing responsive grid with 3 columns and 3 rows (when viewed in a browser).