Using auto-fit, how do I make a 3-item grid that may have 1 or 3 columns but never 2 columns?

Question

.sec5 {
  height: max-content;
  width: 100vw;
  padding: 20px;
}
.sec5-options {
  height: 400px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}
.option1,
.option2,
.option3 {
  background-color: blue;
}

<div class="sec5">
   <div class="sec5-options">
      <div class="option1"></div>
      <div class="option2"></div>
      <div class="option3"></div>
   </div>
</div>

This is my first post.

I am attempting to make a grid that has 3-items and is:

On mobile devices

(max-width: 767.9px)

1
2
3

And on tablet / desktop screens

(min-width: 768px)

1  2  3

I want to avoid the intermediate where the grid is:

1  2
3

The code I am working with is as follows:

<div class="sec5">
   <div class="sec5-options">
      <div class="option1"></div>
      <div class="option2"></div>
      <div class="option3"></div>
   </div>
</div>

.sec5 {
  height: max-content;
  width: 100vw;
  padding: 20px;
}
.sec5-options {
  height: 400px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}
.option1,
.option2,
.option3 {
  background-color: blue;
}

I appreciate any help you can provide!