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 have no idea how to create that sidebar and main content grid with flexbox.

Oh and the superman logo: I can't center it vertically for some reason.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>web1</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div class="menu-container">
      <div class="logo-container">
          <div class="logo"><img src="https://seeklogo.com/images/1/3-colors-superman-logo-ACD3F1907B-seeklogo.com.png"></div>
      <nav class="menu"> 
          <div class="buttonid">
            <a href="#" class="myButton">Avaleht</a>
            <a href="#" class="myButton">Tooted</a>
            <a href="#" class="myButton">Kontakt</a>
          </div>
    </div>
      </div>
      </nav>
    <div class="footer">
        <div class="footer-item">SEE TÖÖTAB VIST</div>
    </div>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }

  .menu-container {
    color: #fff;
    background-image: linear-gradient( rgb(0, 0, 0), rgb(255, 0, 0));
    padding: 20px 0;

  }

  .logo-container {
    display: flex;
    border: blue solid 2px;
    height: 100px;
  }

  .menu {
    border: white solid 3px;
    width: 100%;
    text-align: center;
  }

  .myButton {
    box-shadow:inset 0px 1px 0px 0px #cf866c;
    background:linear-gradient(to bottom, #d0451b 5%, #ff0000 100%);
    background-color:#ff0000;
    border-radius:3px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #854629;
}
.myButton:hover {
    background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    background-color:#bc3315;
}
.myButton:active {
    position:relative;
    top:1px;
}

.logo img {
  width: 100px;
}

.footer {
  color: #fff;
  background-image: linear-gradient( rgb(0, 0, 0), rgb(255, 0, 0));
  padding: 20px 0;
  position: absolute;
  bottom: 1px;
  width: 100%;
}

.footer-item {
  text-align: center;
  font-weight: bold;
  word-spacing: 30px;
}

.buttonid {
  align-items: center;
  word-spacing: 30px;
  height: 100px;
  display: flex;
  justify-content: center;
}

回答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

回答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);

来源：https://stackoverflow.com/questions/58940911/how-to-create-a-sidebar-with-2x3-grid-next-to-it

标签

html

css

flexbox

grid

sidebar