I've been attempting to recreate the functionality of this codepen, and I've encountered an issue with the vw declaration in Chrome. Despite setting GalleryGrid to 100vw, it doesn't display correctly in Chrome, while Firefox and Safari work fine. Any insights on why this behavior is occurring?
Chrome https://i.sstatic.net/5kLQZ.png
Safari/Firefox https://i.sstatic.net/7dhSM.png
HTML
<div class="front margin">
<GalleryGrid>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</GalleryGrid>
</div>
CSS
GalleryGrid{
--content-width: 100vw;
--gutter: 1.5em;
--columns: 1;
--width-size: calc(
( var(--content-width) - (var(--gutter) * (var(--
columns) - 1))
) / var(--columns)
);
--row-size: calc(
((var(--width-size) * 3)/ 2));
display: grid;
width: 100%;
max-width: var(--content-width);
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-rows: var(--row-size);
grid-column-gap: var(--gutter);
grid-row-gap: var(--gutter);
}
.item {
position: relative;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),
0 2px 4px 0 rgba(0,0,0,0.08);
}
.front {
font-family: Noto Sans, Arial, sans-serif;
padding: 3em 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.margin{
margin-left: 4%!important;
margin-right: 4%!important;
}