Scaling the grid in different mobile screens - html

Question

I'm working on creating UI (header, grid, and buttons) and would like it to be the same on every mobile screen. These are the screenshots from different mobile screens right now:
Samsung S5
Pixel 2 XL
Ipad
I'd like the grid in Pixel 2 XL and Ipad to scale like it's scaled in Samsung S5, i.e. in those two screenshots there is a decent amount of white space after Exit button.
I'd like those buttons be on the bottom of the screen, header - on the very top, and the rest covered by the grid.
I feel like I'm doing something wrong with assigning height of the grid - if I make it higher then the buttons would be beyond in Samsung S5. Could somebody help me out with that ?
Code:
HTML:
<div className="component">
<div className="header">
<h3 className="header-title">
Let&apos;s play!
</h3>
<div>
Click the tiles!
</div>
</div>
<div className="grid">
<div className="box"><div className="inner">1</div></div>
<div className="box"><div className="inner">2</div></div>
<div className="box"><div className="inner">3</div></div>
<div className="box"><div className="inner">4</div></div>
<div className="box"><div className="inner">5</div></div>
<div className="box"><div className="inner">6</div></div>
</div>
<div className="buttonAndInput">
<div className="button">
<button
className="primary button-continue">
Start the Game
</button>
</div>
<div className="link">
<a
className="link-text">
Exit
</a>
</div>
</div>
</div>
CSS:
.component {
width: 100%;
height: 100%;
background-color: white;
text-align: center;
}
.header {
margin: 1rem 0;
height: 10%;
}
.grid {
margin: 0 auto;
width: 90%;
height: 70%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 44%;
margin: 5px;
color: black;
font-weight: bold;
flex: 1 0 auto;
position: relative;
border: 1px solid #d2d2d2;
border-radius: 5px;
background: white;
cursor: pointer;
text-align: center;
}
.box .inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.buttonAndInput {
width: 100%;
height: 20%;
margin-top: 0.5rem;
background-color: white;
animation-fill-mode: backwards;
}
.input-text {
width: 100%;
height: 35px;
font-size: 0.833rem;
padding: 0 1rem;
border-radius: 5px;
border: 1px solid #d2d2d2;
-webkit-appearance: none;
-moz-appearance: none;
}
.button {
margin-top: 0.5rem;
&-continue {
height: 35px;
width: 250px;
padding: 0 !important;
}
}
.link {
margin-top: 0.5rem;
a {
text-align: center;
}
}

Answer 1

Give your .component a height: 100vh and flex each of the children (.header, .grid and .buttonAndInput)
html,
body {
margin: 0;
}
.component {
height: 100vh;
text-align: center;
display: flex;
flex-direction: column;
}
.header {
padding: 1rem 0;
flex: 1 1 10%;
}
.grid {
width: 90%;
margin: 0 auto;
flex: 1 1 70%;
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 1 50%;
position: relative;
cursor: pointer;
}
.box .inner {
border-radius: 5px;
margin: 5px;
border: 1px solid #d2d2d2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.buttonAndInput {
width: 100%;
flex: 1 1 20%;
padding-top: 0.5rem;
}
.button {
margin-top: 0.5rem;
}
.button-continue {
height: 35px;
width: 250px;
}
.link {
margin-top: 0.5rem;
}
.link a {
text-align: center;
}
<div class="component">
<div class="header">
<h3 class="header-title">
Let&apos;s play!
</h3>
<div>
Click the tiles!
</div>
</div>
<div class="grid">
<div class="box">
<div class="inner">1</div>
</div>
<div class="box">
<div class="inner">2</div>
</div>
<div class="box">
<div class="inner">3</div>
</div>
<div class="box">
<div class="inner">4</div>
</div>
<div class="box">
<div class="inner">5</div>
</div>
<div class="box">
<div class="inner">6</div>
</div>
</div>
<div class="buttonAndInput">
<div class="button">
<button class="primary button-continue">
Start the Game
</button>
</div>
<div class="link">
<a class="link-text">
Exit
</a>
</div>
</div>
</div>