For some reason the grid is appearing as a 1x9 column instead of 3x3. I think that it has something to do with the "grid-template-columns" part of the CSS but I'm not entirely sure. I made sure there were no typos in my CSS so I know it isn't that.
I have my styling set to:
display: grid;
width: 90vw;
grid-template-columns: 30vw 30vw 30vw;
grid-template-rows: 30vw 30vw 30vw;
margin: 0 5vw 0 5vw;
This ensures all cells are square. By listing 3 values for both columns and rows, it ensures the grid is 3x3.
If you want the grid to be as wide as the viewport, set the "width" to 100vw and the columns to "auto auto auto" to create 3 columns - the width of the columns will be 1/3 of the viewport. Though you would have to resize the rows also :)
For some reason the grid is appearing as a 1x9 column instead of 3x3. I think that it has something to do with the "grid-template-columns" part of the CSS but I'm not entirely sure. I made sure there were no typos in my CSS so I know it isn't that.
I have my styling set to:
display: grid;
width: 90vw;
grid-template-columns: 30vw 30vw 30vw;
grid-template-rows: 30vw 30vw 30vw;
margin: 0 5vw 0 5vw;
This ensures all cells are square. By listing 3 values for both columns and rows, it ensures the grid is 3x3.
If you want the grid to be as wide as the viewport, set the "width" to 100vw and the columns to "auto auto auto" to create 3 columns - the width of the columns will be 1/3 of the viewport. Though you would have to resize the rows also :)
In my opinion this could break your design. You can use instead grid-template-columns: 1fr 1fr 1fr