'Im Stuck | site-nav as sidebar with ul > li elements aligned to main-grid (body-child)

Im kinda new here but im trying my best to nail my point :).

i have learned the very basics of html and css since January (22) and im trying to learn something about grid and flexbox to push my knowledge further.

So i watched many videos - cause this area in my book isn't that well explained, and now i think i got some kowledge about it, but i needed to try some things to proof my understanding.But im actually pretty stuck at my "project" which i started to educate myself through trial and error, and now i need some help ^^.

Code-Snippet_Imgur-Link (here you can see -> devtool inspector - grid view): https://imgur.com/a/gY4L2JX

CodePen-Link: https://codepen.io/BrainLaggz/pen/rNYJJyW

Idea:

So, the Idea is the following - as you can see in the pictures - i would like to have a navbar on the left side which covers the whole site from top to bottom, where every navbar list element is indicating the start of the content on the right side.

I know i can position this with boxes margin, flexbox and so on, but if i do content changes i have to throw my whole layout away ^^, so i thought about a way to connect the navbar with the content grid sections which i have created (which will get filled in future). This content grid-boxes should grow with the content fitted inside and the navbar list element should every time placed at the beginning of the next content section, besides of having more or less content on my single-page website.

Problem:

But as you can see, i didn't continued far and im probably stuck now. Normally i don't have problems with google and technical things, but in this situation i don't know where and how i should search for a solution, so i decided to post my problem here :D.

Things i´ve tried:

I tried some things like using a flexbox with 2 columns and a grid underneath or as you can see a seperate grid at the [ul] [li] level , but this also throws up the problem, that i have to change the whole layout if i add or delete content, cause it's "hard positioned" and there is no connection between the grid column/row sections -besides the fact that it looks off. I hope my snippet and this clumsy explanation will help you to understand my weird idea ^^.

Btw. i know that my code is not optimized and im actually only on a beginner level and i probably know just the very basics of html and css, but i feel i will get a much better understanding of it if i know how i would realize such an "real-life challenge".

Previously i want to say thx for commenting my post and im glad for any ressources which you would recommmend to level up in css with layouting.

I wish you a nice day/weekend :).

kind regards

Julian

HTML:

<body>

 <--! Grid Container -->
  <div class="grid-container">
    <header class="site-header">
      <h1> Headline </h1>
      <h2> Stuff </h2>
    </header>

    <--! My problem is here, cause grid-container is just connected to the first level like: 
    header, nav and main, not to ul/li -->

      <nav class="site-nav">
        <ul>
          <li class="btn-home"><a href="#"> Home </a></li>
          <li class="btn-vita"><a href="#"> Vita </a></li>
          <li class="btn-projects"><a href="#"> Projects </a></li>
          <li class="btn-quotes"><a href="#"> Quotes </a></li>
        </ul>
      </nav>
     
      <--! empty-content -->
        <main class="site-content">
          <article class="vita">
            <p> This is the first of my four grid sections <p>

          </article>
        </main>

        <--! End of grid-container -->
  </div>

  <footer>
    <a href="#top"> Return </a>
  </footer>

</body>

</html>

CSS:


/* Global Main-Grid-Container */
.grid-container {
  display: grid;
  grid-template-columns: 10% 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

html body{
  margin: 0;
}

/* Against html DOM Position nav is placed first/left */
.site-nav {
  height: max-content;
  grid-row-start: 1;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 2 ;
}

/* Against html DOM Position header is placed second/right */
.site-header {
  grid-column-start: 2;
  grid-column-end: 3;
}

/* i used this to try to show you what i wanna reach */
.site-nav ul {
  display: grid;
  height: 95vh;
  background: #eee;
  padding: 0;
  margin-top: 0;
}

/* this is just styling stuff for better visibillity */

.site-nav li {
  margin-top: 0rem;
  list-style: none;
}

.site-nav a {
  display: block;
  margin-top: 0;
  text-decoration: none;
  background: #333;
  color: white;
}


/* surprise, this doesn't work with main-grid-container, cause the main site grid-container is not connected with the ul/li (grandchild's) */
.btn-home {
  grid-row-start: 1;
  grid-row-end: 2;
}

.btn-vita {
  grid-row-start: 3;
  grid-row-end: 4;
}

.btn-projects {
  grid-row-start: 5;
  grid-row-end: 6;
}

.btn-quotes {
  grid-row-start: 6;
  grid-row-end: 6;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Im Stuck | site-nav as sidebar with ul > li elements aligned to main-grid (body-child)

Sources

Related Questions