Our webtech class assignment is to create a static webpage that meets the criteria of the jigsaw w3c css validator. We've encountered a roadblock while trying to resolve the final warning message:
Due to their dynamic nature, CSS variables are currently not statically checked
The problematic code snippet is:
.gallery {
float: right;
margin-right: 5vw;
margin-left: 5vw;
width: 50vw;
margin-bottom: 1vw;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: auto;
gap: 0.5vw;
}
Specifically, the line "grid-template-columns: repeat(var(--num-cols), 1fr);". Currently, the variable --num-cols determines the number of columns in a particular gallery display.
Is there a way to resolve this validation issue without compromising the current functionality of the code?