Search code examples
csscss-positioncss-grid

How to position elements using css grid

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.

Solution

  • Some general tips:

    1. 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.
    1. 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.
    1. 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.

    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>