My CSS Grid doesn't scale properly with content height-wise-CodePudding

Okay, I'll try to make this pretty quick. I'm working on upgrading my website's looks as a fun project. I used tables before as my site layout, but I'm trying to use CSS Grid as I've learned a lot since then. I'm using a CSS grid of just 3 columns, the outer two act as margins and the center is for content. Whenever there is enough content to make the page scroll down, the margins don't grow with it. In fact, neither does the center, because when I scroll to the bottom after putting something below a tall image it just shows the background color of my container.

To make the question simpler, how do I make the off white parts of my page black like the rest of the margins?

Scrolled to middle of page: Link to first picture

Scrolled all the way to the bottom: Link to second picture

I repeat, the off white color is not intentional, that's there because it's the color of the container. Everything that's the cream color should be black or gray!

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    
}

  
.content {
    width: 70vw;
    height: 100vh;
    background-color: #252525;
}

.margin {
    width: 15vw;
    height: 100vh;
    background-color: #000000;
}

table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

tr {
    vertical-align: top;
}

a {
    color: dodgerblue;
}

p {
    color: #45d163;
    font-size: 3.0vh;
    text-align: left;
    margin-left: 2.5vw;
    font-family: Arial, bold;
    font-weight: bold;
}

ol {
    margin-left: 3.5vw;
}
ul{
    
}
li{
    
}

.fixed {
    position: fixed;
}

.grid-container {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  background-color: #fceee3;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 100vh;

}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  min-height: 100vh;
  margin-top: 0%;

  
}
 .grid-center {
  background-color: #252525;
  color: blue;
  font-size: 30vh;
  text-align: left;
  min-height: 100vh;
  margin-top: 0%;

}

<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
  
  <head>
  <meta charset="UTF-8">
  <title>Keyboard Mechanic</title>
  <link rel="stylesheet" href="style.css"> </link>

    <style>

.header {
  overflow: hidden;
  background-color: #171615;
  padding: 1% 1%;
  width: 100%;
  position: fixed;
  height: 7%;
  
  
}

.header a {
  float: left;
  color: #f1f1f1;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
  
  width: max-content !important;
  margin-right: 10px;
 
}

.header a.active {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
  
}

.header a.logo {
  all: unset;
}

.login {
  background-color: dodgerblue;
  color: white;
  width: 8vw;
  margin-right: 10px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}



.header-right {
  float: right;
}

@media screen and (max-width: 100%) {
  .header a {
    float: none;
    display: block;
    text-align: left;
    
  }
 }
</style>

<style>
.wrapper {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 1fr;
  background-color: #fceee3;
  width: 100vw;
  height: 100%;
  overflow: scroll;
  min-height: 100# !important;
 
}
.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  margin-top: 0%;  
  height: auto;
  min-height: 100# !important;
  
}
 .grid-center {
  background-color: #252525;
  margin-top: 0%;
  width: 100%;
  height: 100%;
  min-height: 100# !important;

}


</style>


  </head>
    
  <body>  
      <div >
          <a href="newLook.html"  > <img src="images/cornerlogo.png" height="50px"> </a>
          <div >
          <a  href="newLook.html">Home</a>
          <a  href="games.html">Games</a>
          <a  href="webprojects.html">Web Projects</a>
          <a   href="login.html">Login</a>
          <a href="contact.html">Contact</a>
          <a href="about.html" style="margin-right: 2vw;">About</a>
    
          </div>
       </div>
 
      <div > 
        <div > </div>
        
        <div > 
            <p>Hello </p>
            <img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
            <p> Stuff outside the picture doesn't sit inside the center grid item, if it did, the background would be gray! </p>
        </div>
        
        <div > </div>
      
      </div>
    
  </body>
  
</html>
<!-- partial -->

CodePudding user response：

You could have done this with flex, To the best of my knowledge grid is not made for that purpose!

Here's an example made with flex

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #171615;
}

.header {
  /* If you don't want the header to be sticky on scroll remove these lines */
  position: sticky;
  top: 0;
  /* If you don't want the header to be sticky on scroll remove these lines */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #171615;
}

.header-logo {
  height: 55px;
}

.logo {
  height: 100%;
  width: 135px;
  object-fit: cover;
}

.header-menu {
  display: flex;
  flex-flow: row wrap;
}

.header-menu a {
  color: #f1f1f1;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.header a.active {
  background: dodgerblue;
}

.login {
  background-color: dodgerblue;
}

.header-menu a:hover {
  background-color: #ddd;
  color: black;
}

.wrapper {
  width: 70%;
  color: white;
}


/* you can remove this part */

.white-space {
  display: flex;
  height: 800px;
  font-size: 3rem;
  background: darkgray;
}


/* you can remove this part */

<div >
  <div >
    <a href="#"><img  src="https://via.placeholder.com/135x55" alt="Logo" /></a>
  </div>
  <div >
    <a  href="#">Home</a>
    <a  href="#">Games</a>
    <a  href="#">Web Projects</a>
    <a  href="#">Login</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</div>
<div >
  <!-- put your content here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <div >
    <h2 style="margin: auto">White Space</h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <!-- put your content here -->
</div>

Updated: added custom height to the header

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #171615;
}

.header {
  /* If you don't want the header to be sticky on scroll remove these lines */
  position: sticky;
  top: 0;
  /* If you don't want the header to be sticky on scroll remove these lines */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #171615;
}

.header-logo {
  height: 55px;
}

.logo {
  height: 100%;
  width: 135px;
  object-fit: cover;
}

.header-menu {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  align-items: center;
}

.header-menu a {
  color: #f1f1f1;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.header a.active {
  background: dodgerblue;
}

.login {
  background-color: dodgerblue;
}

.header-menu a:hover {
  background-color: #ddd;
  color: black;
}

.wrapper {
  width: 70%;
  color: white;
}


/* you can remove this part */

.white-space {
  display: flex;
  height: 800px;
  font-size: 3rem;
  background: darkgray;
}


/* you can remove this part */

<div >
  <div >
    <a href="#"><img  src="https://via.placeholder.com/135x55" alt="Logo" /></a>
  </div>
  <div >
    <a  href="#">Home</a>
    <a  href="#">Games</a>
    <a  href="#">Web Projects</a>
    <a  href="#">Login</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</div>
<div >
  <!-- put your content here -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <div >
    <h2 style="margin: auto">White Space</h2>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
  <!-- put your content here -->
</div>

CodePudding user response：

Remove the min-height for .grid-center and .grid-item:

.grid-item {
  background-color: #000000;
  font-size: 5px;
  text-align: left;
  color: #f1f1f1;
  margin-top: 0%;
}
.grid-center {
  background-color: #252525;
  color: blue;
  font-size: 30vh;
  text-align: left;
  margin-top: 0%;
}