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 :)
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