If you need to centrally align the entire btn, simply apply align-items: center on the grid-wrapper - check out the demo below:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
grid-gap: 0.5rem;
height: 100vh;
align-items: center; /* vertically centered */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
<div class="btn btn-primary">Content A</div>
<div class="btn btn-warning">Content B</div>
<div class="btn btn-danger">Content C</div>
<div class="btn btn-success">Content D</div>
</div>
If you wish to stretch the background and achieve vertical alignment within the btn, consider using flexbox for the btn - refer to the demo below:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
grid-gap: 0.5rem;
height: 100vh;
}
.grid-wrapper > .btn {
display: flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
<div class="btn btn-primary">Content A</div>
<div class="btn btn-warning">Content B</div>
<div class="btn btn-danger">Content C</div>
<div class="btn btn-success">Content D</div>
</div>
I understand that I could use flexbox but unfortunately that is not an option for this project.
If utilizing flexbox is not feasible, consider employing a pseudo element to center the text in the grid items - have a look at the demo below:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
grid-gap: 0.5rem;
height: 100vh;
}
.grid-wrapper .btn:after {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
<div class="btn btn-primary">Content A</div>
<div class="btn btn-warning">Content B</div>
<div class="btn btn-danger">Content C</div>
<div class="btn btn-success">Content D</div>
</div>