How to position elements using css grid - css

Question

I am new to css grid and I just understood how exactly positioning the grid elements works. What I don't understand is how to put an item that's resizing inside this grid element.
I will explain it this way:
This is my site's layout
and this is my code:
<div class="container">
<div class="header">Header</div>
<div class="content1">Content1</div>
<div class="content2">Content2</div>
<div class="footer">footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px 1fr 1fr 120px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.header {
grid-column: 1 / 5;
}
.content1 {
row-gap: 200px;
grid-column: 1 / 5;
grid-row: 2 / 3;
}
So now what I would love to do is in that header box an actual navigation menu but I want somehow to be only inside this box and resize automatically when I change the size of that box. Right now this is what I have done:
2nd picture
code:
<div class="header">
<nav>
<ul>
<li> <a text-white asp-area="" asp-page="/main">Home</a></li>
<li><a text-white asp-area="" asp-page="/pc">Games</a>
<ul>
<li><a text-white asp-area="" asp-page="/pc">PC</a></li>
<li><a text-white asp-area="" asp-page="/xbox">XBOX</a></li>
<li><a text-white asp-area="" asp-page="/ps">PS</a></li>
</ul>
</li>
<li><a text-white asp-area="" asp-page="/devices">Devices</a></li>
<li><a text-white asp-area="" asp-page="/pcparts">PC Parts</a></li>
</ul>
</nav>
</div>
.header {
grid-column: 1 / 5;
}
nav p {
float: left;
color: white;
font-size: 20px;
line-height: 40px;
}
nav ul {
float: left;
background-color: #222;
z-index: 998;
}
nav ul li {
float: left;
list-style: none;
padding: 0px 15.50px;
}
nav ul li a {
display: block;
font-family: arial;
background-color: #222;
color: #fff;
font-size: 16px;
padding: 26px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #222;
outline-color: #f92525;
padding: 0px 2px;
padding-left: 0vh;
left: 2px;
width: 35px;
border-radius: repeat (5, 4px);
}
and this is so wrong that I don't really have an idea how it should be. I am sorry if this question exists but I tried to find a solution and I could not resolve the problem with anything I got from the Internet, nor understood how it should be.

Answer 1

Some general tips:
Don't define your site layout using both grid template rows and grid template columns.
Instead: If you have Sidebar, use grid-template-columns, if you have stacked content (like you), just use display:grid; This will force the content to stack ontop of each other.
Don't define static heights for your header and footer
Instead: Work with the spacing of the elements inside (margin and padding) to make your container responsive.
Get familiar with Flexbox and Grid a bit more to easily get started modelling your site, for example spacing out your menu items and much more.
Resources:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Here is an example of those tricks:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 1rem;
}
.main {
display: grid;
}
.nav, .content {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.nav {
padding: 2rem;
}
.content {
padding: 5rem;
}
<div id="main">
<header class="nav">Header</header>
<div class="content">Content 1</div>
<div class="content">Content 1</div>
<footer class="nav">Footer</footer>
</div>