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

Question

I have a question, I have this page right here:

And I have all boxes set up as a grid. But I want all black borders touching each other. So that all space is fully filled up with the grid only. The whole page needs to be the grid. See the code below:

DEMO:

 * {
    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>

Answer 1

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>

Answer 2

Did you try to set CSS:

/* ADDED */
.grid-container > div {
  width:calc(100% - 6px);
}

DEMO

* {
    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;
}

/* ADDED */
.grid-container > div {
  width:calc(100% - 6px);
}

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