Why Display Grid with 100% in Grid-Template-Columns Goes Out of Body

Why does grid-gap cause an overflow?

Short Answer

Because the width of the columns plus the width of the gaps is greater than 100%.

Explanation

You have a 3-column grid container (.body):

grid-template-columns: 25% 50% 25%

The total width of those columns is 100%.

You're then adding gutters between the columns (and rows):

grid-gap: 10px

which is shorthand for:

grid-column-gap: 10px;
grid-row-gap: 10px;

So this becomes the width calculation:

25% + 50% + 25% + 10px + 10px

Hence,

100% + 20px > 100%, which results in an overflow condition

Note that the grid-*-gap properties apply only between grid items – never between items and the container. That's why we calculate two grid gaps, not four.

As a solution, instead of percentage units, try using fr units, which apply only to free space. This means that fr lengths are calculated after any grid-gap lengths are applied.

grid-template-columns: 1fr 2fr 1fr

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {}

.row-center {}

.row-right {}

<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>
</div>

CSS Grid issues with content going outside of container

You should avoid applying the display grid directly to the body element to avoid having unwanted element considered inside the grid. Then you can simplify the grid-template-rows using 60px auto auto and get rid of the grid-area on the mobile view. You can also consider using min-height:100vh to have full height page and allow the content to grow on small device.

div.body {  font-family: 'Montserrat', sans-serif;  display: grid;  grid-template-rows: 60px 1fr;  min-height: 100vh;}
nav {  background-color: pink;}
aside {  display: none;  background-color: rgb(10, 116, 187);  color: white;  border-right: 5px solid rgb(2, 106, 175);}
main {  color: #4C4C4C;  background-color: rgb(248, 248, 248);}

/****************************************** MEDIA QUERIES******************************************/

/* 600px screen width OR larger */
@media only screen and (min-width: 600px) {  div.body {    display: grid;    grid-template-rows: 100px 1fr;    grid-template-columns: 250px 1fr;    grid-template-areas: "aside main" "aside main";  }  aside {    grid-area: aside;  }  main {    grid-area: main;  }  nav {    display: none!important;  }  .brandText {    text-align: center;    font-size: 25px;    margin-top: 10px;  }  .smallProfileImageDiv {    height: 100px;    margin-top: 30px;    margin-bottom: 20px;  }  .smallProfileImageDiv img {    width: 100px;    height: 100px;  }  .imgCircle {    border-radius: 50%;  }  .profileNameBox {    text-align: center;    margin-bottom: 60px;  }  .profileName {    font-size: 16px;  }  .positionTitle {    margin-top: 5px;  }  .leftNavOptions {    margin-left: 25px;  }  .leftNavItemOption {    margin-bottom: 20px;    padding: 5px;  }  .leftNavItemOption:hover {    margin-bottom: 20px;    padding: 5px;    background-color: orange;  }  .leftNavOptionIcon {    min-width: 20px;    font-size: 18px;  }  .leftNavOption {    margin-left: 15px;  }}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File --><link href="css/main.css" rel="stylesheet">
<!-- Google Fonts --><link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="body">  <nav>    Hi  </nav>
  <aside>
    <div class="container-fluid">
      <div class="row">        <div class="col-lg-12 brandText">          CarePower.io        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="smallProfileImageDiv">            <img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">          </div>        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="profileNameBox">            <span class="profileName">John Doe</span>            <div class="positionTitle">              <span class="badge badge-primary">CEO</span>            </div>          </div>        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="leftNavItemOption">            <i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>          </div>        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="leftNavItemOption">            <i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>          </div>        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="leftNavItemOption">            <i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>          </div>        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="leftNavItemOption">            <i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>          </div>        </div>      </div>
      <div class="row">        <div class="col-lg-12">          <div class="leftNavItemOption">            <i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>          </div>        </div>      </div>
    </div>
  </aside>
  <main>Main</main>
</div>
<!-- JavaScript Libraries --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Grid element not expanding to 100% width

You aren't create 100% Grid column. grid-template-columns:10% 40% 20% 10% 5%; = 85%. Make it 100%. Change grid-template-columns:10% 40% 20% 10% 5%; to grid-template-columns: 20% 40% 20% 10% 10%;. Now it's 100% width. Example is here.

Also add box-sizing CSS.

*,
*:after,
*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

The box-sizing CSS property sets how the total width and height of an element is calculated. Details in MDN.

grid column gap without resizing the grid

Because you used % to define grid-template-columns, meanwhile 20% + 60% + 20% is already 100%. So if there's gap, the grid content's width adds up will be larger than the grid itself, which occurs overflow, leads to the scroll bar that you saw.

The solution is to use the fr unit instead of %

.grid{  display:grid;  height:100vh;  grid-template-columns:20fr 60fr 20fr;  /* grid-template-columns:1fr 3fr 1fr; do the same at the above*/   grid-column-gap:14px;}
.grid div{  background:orange;}

<div class='grid'>  <div class='col'></div>  <div class='col'></div>  <div class='col'></div></div>

CSS Grid needs to be 100% width and height on all sides

The problem is this rule in your code:

* {
   margin: 0 auto;
}

The auto margins are centering the grid items within the columns.

Remove that rule, or modify the selector, and you're done.

 /* * {
   margin: 0 auto;
 } */

 body {
   width: 100%;
   height: 100%;
   min-width: 100%;
   overflow: hidden;
 }

 .grid-container {
   display: grid;
   grid-template-columns: 0.8fr 2fr 0.8fr;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   gap: 0px 0px;
   grid-template-areas:
     "logo nav time"
     "computer-menu terminal computer-anim"
     "missions terminal notebook"
     "missions terminal notebook";
 }

 .missions {
   grid-area: missions;
   border: 3px solid black;
 }

 .terminal {
   grid-area: terminal;
   border: 3px solid black;
 }

 .notebook {
   grid-area: notebook;
   border: 3px solid black;
 }

 .computer-menu {
   grid-area: computer-menu;
   border: 3px solid black;
 }

 .logo {
   grid-area: logo;
   border: 3px solid black;
 }

 .nav {
   grid-area: nav;
   border: 3px solid black;
 }

 .time {
   grid-area: time;
   border: 3px solid black;
 }

 .computer-anim {
   grid-area: computer-anim;
   border: 3px solid black;
 }

<div class="grid-container">
  <div class="missions">
    <h1>MISSIONS</h1>
  </div>
  <div class="terminal">
    <h1>TERMINAL</h1>
  </div>
  <div class="notebook">
    <h1>NOTEBOOK</h1>
  </div>
  <div class="computer-menu">
    <h1>COMPUTER-MENU</h1>
  </div>
  <div class="logo">
    <h1>LOGO</h1>
  </div>
  <div class="nav">
    <h1>NAV</h1>
  </div>
  <div class="time">
    <h1>TIME</h1>
  </div>
  <div class="computer-anim">
    <h1>COMPUTER-ANIM</h1>
  </div>
</div>

How to make some CSS Grid elements stick to the viewport?

You need to use min-height:100vh instead of height:100vh

And then use position:sticky on element you want to be sticky with top or bottom.

body {
        display: grid;
        grid-template-columns: 1fr minmax(20em, 30vw);
        grid-template-rows: clamp(3em, 10vh, 5em) 1fr clamp(7em, 20vh, 9em);
    }
    
    header {
        background-color: #eee;
        grid-column: 1 / end;
        grid-row: 1 / 2;
    }
    
    main {
      min-height:100vh;
        grid-column: 1 / end;
        grid-row: 1 / end;
    }
    
    
    aside {
        background-color: #ccc;
        grid-column: 2 / end;
        grid-row: 2 / end;
        position: sticky;
        top: 0;
        z-index:99999;
    }
    
    footer {
        background-color: #444;
        grid-row: 3 / end;
        grid-column: 1 / end;
       position: sticky;
        bottom: 0
          ;
    }

<body>
    <header></header>
    <main>
        <section class="questions" id="objectives">
            <h2>Objectives</h2>
            <div class="question">
                <h3>1. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>2. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>3. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>4. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>6. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>7. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>8. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>9. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
        </section>
    </main>
    <aside></aside>
    <footer></footer>
</body>