CSS Grid explicitly defined not displaying full width
Using the following HTML and CSS:
.grid-container{ display: grid; width: 100vw; height: 100vh; grid-template-columns: repeat(5, 20vh); grid-template-rows: repeat(5, 20vw); <div class="grid-container"> <h1>Hello World</h1> </div> Codepen here https://codepen.io/scriptmunkee/pen/dyGdNow
I’m looking at the grid with firefox web dev tools.
why doesnt the grid cover the whole viewport in equal size columns and rows? It comes up short on the column front. I’ve tested this on homeserver its also the case.
I had incorrectly defined columns and rows.
grid-template-columns: repeat(5, 20vw); grid-template-rows: repeat(5, 20vh); is correct. Thanks Temani Afif
