Place all items in the center of the screen using CSS Grid

So basically what i want to do is to have 9 Boxes in the middle of the screen.

This is what i tried:

main {
  border: 4px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-items: center;
}

.box1 {
  background: red;
  width: 50%;
}

.box2 {
  background: blue;
  width: 50%;
}

.box3 {
  background: green;
  width: 50%;
}

<main>
  <div class="box1">
    <h1>Box 1</h1>
  </div>

  <div class="box2">
    <h1>Box 2</h1>
  </div>

  <div class="box3">
    <h1>Box 3</h1>
  </div>


  <div class="box1">
    <h1>Box 4</h1>
  </div>

  <div class="box2">
    <h1>Box 5</h1>
  </div>

  <div class="box3">
    <h1>Box 6</h1>
  </div>


  <div class="box1">
    <h1>Box 7</h1>
  </div>

  <div class="box2">
    <h1>Box 8</h1>
  </div>

  <div class="box3">
    <h1>Box 9</h1>
  </div>
</main>

This almost does what i want.

So what i get is this:

-b-b-b-

with - being free space.

What i want is this:

-bbb-

so that the 9 boxes actually touch each other.

Is there a way to do that?

(i want to hold on to the grid-template-columns: 1fr 1fr 1fr and grid-template-rows: 1fr 1fr 1fr)

tyvm :)

Solution

Is there a way to do that? (i want to hold on to the grid-template-columns: 1fr 1fr 1fr and grid-template-rows: 1fr 1fr 1fr)

No. There is no way to do this.

Because you've set your columns to 1fr each, they will spread across the width of the container in equal lengths. Therefore, the columns are not centered.

You would have to do something like this: grid-template-columns: 1fr auto auto auto 1fr, with the 1fr columns having no content and used solely for spacing. This set up would pin the three inner columns to the center.