How To Create A Sidebar With 2x3 Grid Next To It

I want to create a sidebar and a grid that has 2 rows and 3 columns (beside the sidebar). I already have a nav bar and a footer (just a layout, links are not supposed to work) I ha

Solution 1:

You should break your layout into different areas and use for each an HTML container . HTML5 brought to us a few , use them instead divs, the code will be meaningfull and easy to read.

start to build the CSS layout first , the header, main and footer, then the content of main (sidebar and rows).

example to start from : ( possible example to come up with )

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer,
aside,
article {
  border: solid;
}

main,
section {
  flex: 1;
  display: flex;
}

section {
  flex-wrap: wrap;
}

article {
  flex: 1;
  min-width: 30%;
}

/* is sizing an issue ? */
 /* try */
 
 body:hover * { padding:0.25em;transition:0.25s;box-sizing:border-box;}
body:hover aside, body:hover article {margin:2px;}

<header>
  header</header>
<main>
  <aside>
    aside
  </aside>
  <section>
    <article> article</article>
    <article> article</article>
    <article> article</article>
    <article> article</article>
    <article> article</article>
    <article> article</article>
  </section>
</main>
<footer>footer</footer>

from there you have a template where you can insert your contents , add class or id and style each portion as you want

Solution 2:

set your .menu-container to display: grid; grid-template-column: [here goes the width of you side-nav, ex:200px] [width of your grid that has two rows ex: 1fr;

and for your other grid display: grid; grid-template-rows: repeat(2, 1fr); grid-template-column: repeat(3,1fr);