How do I position css grid items inside a container?

[hoodedvul]

The demo code used is:

CSS

...
 .container {
        width: 800px;
        background-color: rgb(95, 118, 133);
        margin: 40px auto;
        display: grid;
        grid-template-rows: 1fr, 1fr;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30px;
      }

      .item {
        padding: 30px;
        font-size: 30px;
        color: #ffffff;
      }

      .item1 {
        background-color: plum;
      }

      .item2 {
        background-color: mediumvioletred;
      }

      .item3 {
        background-color: chocolate;
      }

      .item4 {
        background-color: darkgreen;
      }

      .item5 {
        background-color: firebrick;
      }

      .item6 {
        background-color: olivedrab;
      }
...

HTML

...
  <div class="container">
      <div class="item item1">item 1</div>
      <div class="item item2">item 2</div>
      <div class="item item3">item 3</div>
      <div class="item item4">item 4</div>
      <div class="item item5">item 5</div>
      <div class="item item6">item 6</div>
    </div>
...

The result is:

We want to position item1 in the grid at the end where item 6 is. This can be achieved using the following CSS grid properties for item1, The numbers are the grid line numbers for columns and rows.

...
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;

The result is:

The other items in the container will auto position because no grid position has been defined for them.