制作一个和屏幕一样大的网格

Question

I need the grid ad big as the page (it should touch the top the bottom and both sides) and I'd like it to be non-scrollable.

HTML:

<div class="wrapper">
   <div class="prova">One</div>
   <div class="prova"> </div>
   <div class="prova">Three</div>
   <div class="prova">Four</div>
   <div class="prova"> five </div>
   <div class="prova">Six</div>
   <div class="prova">Seven</div>
   <div class="prova">Eight</div>
   <div class="prova">Nine</div>
   <div class="prova">Ten</div>
   <div class="prova">Eleven</div>
   <div class="prova">Twelve</div>
</div>

CSS:

.wrapper {
  padding-top: 10%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}

.prova{
      border: 1px solid; 
}

 .wrapper div:nth-child(2) {
   grid-column: 3;
   grid-row: 2 / 4;
 }
 .wrapper div:nth-child(5) {
   grid-column: 1 / 3;
   grid-row: 1 / 3;
}

I've read multiple questions but I couldn't find any solution that works fine for me.

As you can see in the picture above the grid doesn't touch neither the top or the bottom!

Answer 1

Set gird-auto-rows to use a percentage of the viewport height. Equal amounts per expected row. So in your case 25vh . Then remove any padding or margin around the grid.

 html, body { margin: 0 }.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vh; width: 100%; }.prova{ border: 1px solid; }.wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; }.wrapper div:nth-child(5) { grid-column: 1 / 3; grid-row: 1 / 3; }

 <div class="wrapper"> <div class="prova">One</div> <div class="prova"> </div> <div class="prova">Three</div> <div class="prova">Four</div> <div class="prova"> five </div> <div class="prova">Six</div> <div class="prova">Seven</div> <div class="prova">Eight</div> <div class="prova">Nine</div> <div class="prova">Ten</div> <div class="prova">Eleven</div> <div class="prova">Twelve</div> </div>

Answer 2

If you want it to touches the top just remove the padding And for other sides just set the width and height of the wrapper to 100vh and 100vw