Css Grid - Top row restricted height - html

Question

In my web app I am using css grid to build a basic home page. I want the top grid item: item-1 to be as tall as possible so that the whole grid fills the viewport. See image.
So that leaves no gap at the bottom. I have tried adjusting the height of the wrapper, the row height in grid-template-rows and changing the numbers in each individual item's grid-column value. How do I make item-1 cover more of the viewport and moves the 4 items below it down to touch the bottom?
.wrapper {
margin-top: -25px;
width:100vw;
height: 70vh;
// border: 2px solid #ccc;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 90px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
align-content: end;
padding-bottom: 10px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
text-align: center;
}
.item-1 {
margin-top: 50px;
background-image: url(../assets/imgs/placeholder.png);
grid-column: 1 / 5;
grid-row: 1 / 5;
}
.item-2 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.1);
}
.item-3 {
grid-column: 3 / 5;
background-color: rgba(250, 250, 250, 0.4);
}
.item-4 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.4);
}
.item-5 {
grid-column: 3/ 5;
background-color: rgba(250, 250, 250, 0.4);
}
<div class="wrapper">
<div class="box item-1"></div>
<div tappable (click)="loadAbout()" class="box item-2"><i class="icon fa fa-info"></i>About</div>
<div tappable (click)="loadHowTo()" class="box item-3"><i class="icon fa fa-question"></i>How To</div>
<div tappable (click)="loadList()" class="box item-4"><i class="icon fa fa-signal"></i>List</div>
<div tappable (click)="loadContact()" class="box item-5"><i class="icon fa fa-comments"></i>Contact Us</div>
</div>

Answer 1

Set the wrapper grid-template-rows to auto 100px 100px.
html,
body {
font-family: Arial;
margin: 0;
padding: 0;
}
.grid {
width: 100vw;
height: 100vh;
background: #333;
display: grid;
grid-template-rows: auto 100px 100px;
grid-template-columns: repeat(4, 90px);
grid-gap: 5px;
justify-content: center;
}
.grid * {
color: white;
font-size: 120%;
background: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.grid .grid-item-1 {
grid-column: 1 / 5;
grid-row: 1;
}
.grid .grid-item-2,
.grid .grid-item-3 {
grid-row: 2;
}
.grid .grid-item-4,
.grid .grid-item-5 {
grid-row: 3;
}
.grid .grid-item-2,
.grid .grid-item-4 {
grid-column: 1 / 3;
}
.grid .grid-item-3,
.grid .grid-item-5 {
grid-column: 3 / 5;
}
<div class="grid">
<div class="grid-item-1"></div>
<div class="grid-item-2">about</div>
<div class="grid-item-3">how to</div>
<div class="grid-item-4">list</div>
<div class="grid-item-5">contact us</div>
</div>

Answer 2

making width: 100vh; to your .wrapper and .item-1 divs might be what you're looking for. This should omit the need for negative margins, padding-bottom and align-content properties.
Hope that helps!
.wrapper {
/* margin-top: -25px; */
width: 100vw;
height: 100vh; /* made 100vh */
/* // border: 2px solid #ccc; */
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 90px);
grid-template-rows: repeat(4, 100px);
justify-content: center;
/* align-content: end; */
/* padding-bottom: 10px; */
}
.box {
background-color: orange;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
text-align: center;
}
.item-1 {
/* margin-top: 50px; */
background-image: url(../assets/imgs/placeholder.png);
grid-column: 1 / 5;
grid-row: 1 / 5;
height: 100vh;
}
.item-2 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.1);
}
.item-3 {
grid-column: 3 / 5;
background-color: rgba(250, 250, 250, 0.4);
}
.item-4 {
grid-column: 1 / 3;
background-color: rgba(250, 250, 250, 0.4);
}
.item-5 {
grid-column: 3/ 5;
background-color: rgba(250, 250, 250, 0.4);
}
<div class="wrapper">
<div class="box item-1"></div>
<div tappable (click)="loadAbout()" class="box item-2"><i class="icon fa fa-info"></i>About</div>
<div tappable (click)="loadHowTo()" class="box item-3"><i class="icon fa fa-question"></i>How To</div>
<div tappable (click)="loadFreq()" class="box item-4"><i class="icon fa fa-signal"></i>List</div>
<div tappable (click)="loadContact()" class="box item-5"><i class="icon fa fa-comments"></i>Contact Us</div>
</div>