How to change the content of grid items without using 'vw' units? - html

Question

I'm quite new to building grid layouts. I'm trying to change the dimensions of the content in the grid elements via pixels, percentages, but they remain the same, only viewport units work. There are grid-template-columns and grid-template-rows allow to increase the size of the content. I'm trying to make the top two elements: logo and menu hamburger, get bigger and almost adjacent to each other. And, I noticed that if reduce the height of the visible area of the screen, then the elements increase. Why can't I "simply" increase these two elements without doing this is beyond me? Below is a piece of code and one screenshot of what the mobile version looks like now, and how it should. Please check what is wrong.
* {
padding:0;
margin:0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", sans-serif;
height: 100vh;
}
.container {
display: grid;
grid-template-columns: repeat(10, 10%);
grid-template-rows: repeat(20, 5%);
height: 100%;
box-sizing: border-box;
}
.logo {
grid-column: 1 / 10;
grid-row: 1 / 4;
background-color: #f8f8f8;
display: flex;
align-items: center;
padding-left: 3%;
}
.logo img {
max-width: 100%;
height: auto;
}
.header {
grid-column: 10 / 11;
grid-row: 1 / 4;
background-color: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
}
.gsi {
background-color: #1b8183;
grid-column: 1 / 6;
grid-row: 8 / 17;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: start;
padding-left: 7%;
}
/* Text */
.gsi h1 {
font-family: 'TT Norms', Helvetica Now, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 3vw;
color: #ffffff;
white-space: nowrap;
}
.gsi h1::after {
display: inline-block;
vertical-align: middle;
content: "";
height: 1px;
position: relative;
background-color: #ffffff;
width: 4vw;
right: -0.5em;
}
.gsi p {
font-family: 'TT Norms', Helvetica Now, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 2vw;
color: #ffffff;
margin: 0;
white-space: nowrap;
}
.button {
font-family: 'TT Norms', Helvetica Now, Helvetica, Arial, sans-serif;
font-size: 1.5vw;
background-color: rgba(28, 28, 28, 0);
border: 2px solid #fff;
border-radius: 3em / 3em;
color: white;
padding: 1% 7.5%;
text-align: center;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
.pillar {
grid-column: 5 / 11;
grid-row: 4 / 21;
}
.pillar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Anything related to hamburger */
.logo-text a:active,
.logo-text a:hover,
.logo-text a {
text-decoration: none;
color: #1b8183;
font-size: 2vw;
font-weight: bold;
}
.menu-btn {
height: 70px;
position: relative;
z-index: 3;
overflow: hidden;
padding-right: 50px;
cursor: pointer;
}
.menu-btn span {
width: 50px;
height: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #538b99;
border: 1px solid #538b99;
border-radius: 10px;
transition: all 0.5s;
}
.menu-btn span:nth-of-type(2) {
top: calc(40% - 5px);
}
.menu-btn span:nth-of-type(3) {
top: calc(60% + 5px);
}
.menu-btn.active span:nth-of-type(1) {
display: none;
}
.menu-btn.active span:nth-of-type(2) {
top: 50%;
transform: translate(-50%, 0%) rotate(45deg);
}
.menu-btn.active span:nth-of-type(3) {
top: 50%;
transform: translate(-50%, 0%) rotate(-45deg);
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 15px;
background: #f8f8f8;
transform: translateX(-100%);
transition: transform 0.5s;
}
.menu.active {
transform: translateX(0);
z-index: 2; /* > gsi =1 & < menu.active = 3 */
}
.menu li {
list-style-type: none;
font-family: 'TT Norms', Helvetica Now, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 2vw;
padding-top: 2%;
}
.menu.active nav {
margin: 0 auto;
text-align: center;
}
.menu.active nav a {
position: relative;
color: black;
cursor: pointer;
line-height: 1;
text-decoration: none;
}
.menu.active nav a:after {
display: block;
position: absolute;
left: 0;
width: 0;
height: 3.5px;
background-color: black;
content: "";
transition: width 0.4s ease-out;
}
.menu.active nav a:hover:after,
.menu.active nav a:focus:after {
width: 100%;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0">
<title>Web-site</title>
</head>
<body>
<div class="container">
<div class="logo"><img src="https://i.postimg.cc/bYD24JGb/logo.png" alt="логотип"></div>
<div class="header">
<div class="menu-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</nav>
</div>
<div class="gsi"><h1>NAME</h1><p>Lorem Ipsum</p><input type="button" class="button" value="Compose"></div>
<div class="pillar"><img src="https://i.postimg.cc/7hxMnrVX/pillar.png" alt="Pillar"></div>
</div>
</body>
</html>